AJAX异步上传,用第三方的组件实现,首先下载一个jQuery 的Ajax文件上传的组件,下载地址为:http://www.phpletter.com/,下载完毕解压找到ajaxfilemanagerv1.1\ajaxfilemanager\jscripts中的ajaxfileupload.js。
下面是本人YII项目中的测试例子
【controllers】
public function actionToolsUpload() {
$this->render("toolsUpload", array("promptData" => ""));
}
function actionUpload() {
if (!empty($_FILES['img']['tmp_name'])) {
//echo json_encode(array('file_infor' => dirname(__FILE__)));exit;
//$dirs = dirname(__FILE__);
/* 设定上传目录 */
$uploads_dir = getcwd() . '\img\uploads';
$uploads_dir = str_replace("\\","/",$uploads_dir);
// chdir($uploads_dir);//转换新地址为当前目录,测试完关闭,不然无法正常上传
// getcwd() //打印出新目录的绝对地址
/* 检测上传目录是否存在 */
if (!is_dir($uploads_dir) || !is_writeable($uploads_dir)) {
if (!mkdir($uploads_dir, 0777)) {
echo json_encode(array('file_infor' => "mkdir error"));
exit;
}
}
/* 设置允许上传文件的类型 */
$allow_type = array("image/jpg", "image/jpeg", "image/png", "image/pjpeg", "image/gif", "image/bmp", "image/x-png");
$get_img_type = $_FILES['img']['type'];
if (!in_array($get_img_type, $allow_type)) {
echo json_encode(array('file_infor' => "图片格式不对,请重新上传!"));
exit;
}
/* 设置文件名为"日期_文件名" */
date_default_timezone_set('PRC');
$newName = date("YmdHis") . "_" . $_FILES['img']['name'];
$path = $uploads_dir . '/' . $newName;
/* 移动上传文件到指定文件夹 */
$state = move_uploaded_file($_FILES['img']['tmp_name'], $path);
$imgsrc = 'img/uploads/' . $newName;
if ($state) {
$message = "文件上传成功!";
$message .= "文件名:" . $newName . "";
$message .= "大小:" . ( round($_FILES['img']['size'] / 1024, 2) ) . " KB";
} else {
/* 处理错误信息 */
switch ($_FILES['img']['error']) {
case 1 : $message = "上传文件大小超出 php.ini:upload_max_filesize 限制";
case 2 : $message = "上传文件大小超出 MAX_FILE_SIZE 限制";
case 3 : $message = "文件仅被部分上传";
case 4 : $message = "没有文件被上传";
case 5 : $message = "找不到临时文件夹";
case 6 : $message = "文件写入失败";
}
}
echo json_encode(array('file_infor' => $message, 'imgsrc' => $imgsrc));
exit;
} else {
echo json_encode(array('file_infor' => 'false'));
}
}
【views】
1、上传页
<div class="control-group">
<label class="control-label" for="">图片:</label>
<div class="controls">
<div style="float: left;">
<input type="text" class="input-small" id="editModalTextEditUpfile" style="height: 20px"></div>
<div style="float: left;">
<iframe scrolling="no" src="<?php echo $this->createUrl('/toolsManagement/toolsUpload'); ?>" name="uploadIframe" style="width:200px; height:32px; padding: 0; border: 0px;"></iframe></div>
</div>
</div>
2、子框架
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="/bms/js/tools/jquery.js"></script>
<script type="text/javascript" src="/bms/js/tools/ajaxfileupload.js"></script>
<script type="text/javascript">
function ajaxFileUpload()
{
$.ajaxFileUpload
(
{
url: '/bms/toolsManagement/upload',
secureuri: false,
fileElementId: 'img',
dataType: 'json',
success: function(data)
{
alert(data.file_infor);
// console.log(data.file_infor); window.parent.document.getElementById('editModalTextEditUpfile').value=data.imgsrc;
}
}
);
return false;
}
</script>
</head>
<body style="margin-top: 0px; padding: 0px">
<input id="img" type="file" size="45" name="img" style="width:65px;height:30px;">
<input type="button" onclick="return ajaxFileUpload();" value="上传" style="width:45px;height:30px;">
</body>
</html>
相关推荐
在Yii中,Ajax(异步JavaScript和XML)技术被广泛应用于提高用户体验,通过发送背景请求来更新部分页面内容,而无需刷新整个页面。下面将详细解释Yii中实现Ajax应用的原理,以及上述例子中的具体实现过程。 1. **...
在Yii2框架中实现ajax上传图片功能,可以通过下载并使用第三方插件mdmsoft/yii2-upload-file来完成。这个过程涉及到了几个关键知识点,包括模型的构建、行为的附加、表单的创建和数据的验证和处理。 首先,需要创建...
在 Yii 中使用 AJAX(异步 JavaScript 和 XML)可以极大地提升用户体验,因为它允许后台数据的无刷新更新。本教程将深入探讨如何在 Yii 框架中实现 AJAX 功能,以及与之相关的知识点。 首先,`vtalk.ini` 文件可能...
在Yii2框架中,实现ActiveForm的ajax表单异步验证,主要涉及的技术点包括:ActiveForm组件、ajax验证、modal弹窗、以及客户端和服务端的数据交互。本文将针对这些知识点进行详细解读。 ### 一、ActiveForm组件 在...
6. **AJAX支持**:易于实现页面异步更新,提升用户体验。 7. **单元测试**:内置单元测试框架,保障代码质量。 8. **YII2**:YII的最新版本,引入了更多的现代PHP特性,如Composer依赖管理、命名空间等。 **结合...
当文件通过Ajax异步上传时,可以通过监听`progress`事件来获取已上传的数据量,并更新进度条的状态。 ```html <progress id="uploadProgress" value="0" max="100"></progress> var xhr = new XMLHttpRequest();...
9. **Ajax与jQuery**:使用Yii集成的jQuery库,实现异步交互和动态更新。 10. **扩展与插件**:理解和使用Yii社区提供的第三方扩展,以及如何创建自己的扩展。 通过深入阅读《Yii 书》,开发者不仅可以提升PHP编程...
在Yii2框架中实现AJAX请求,一般需要以下几个步骤: 1. 在控制器(Controller)中定义一个动作(Action)来处理AJAX请求。这个动作会检查请求参数,执行相应的业务逻辑,并根据结果返回JSON格式的数据。 2. 在视图...
- 通过 jQuery 和其他 AJAX 工具集,Yii 可以轻松实现异步页面更新和无刷新操作。 9. **国际化和本地化** - 支持多语言,方便不同地区用户使用。 10. **命令行工具** - 提供 yiic 命令行工具,用于生成模型、...
这个"yii2-file-upload-master.zip"压缩包包含了一个针对Yii2.0框架的图片上传扩展,特别设计来支持异步加载缩略图功能。这种功能在现代网页应用中非常常见,特别是在用户需要上传图像并即时查看预览效果时。 该...
在前端,Yii支持AJAX,可以实现异步交互,提升用户体验。比如,商品筛选、添加到购物车等操作可以无需刷新页面完成。Yii的模板引擎也允许开发者使用简洁的语法编写复杂的视图逻辑。 总的来说,“yii框架商城”是一...
本文将介绍如何在网页中实现Ajax翻页效果,模仿Yii框架中的分页功能。Ajax(Asynchronous JavaScript and XML)技术允许我们在不重新加载整个页面的情况下更新部分网页内容,提供更好的用户体验。 首先,观察给定的...
在实际开发过程中,我们常常需要实现异步的AJAX提交,从而提升用户体验。本文针对Yii2框架下的ActiveForm组件如何进行AJAX提交进行详细介绍。 首先,要实现ActiveForm的AJAX提交,需要在ActiveForm组件中启用AJAX...
同时,它还支持AJAX,可以实现异步更新,提升用户体验。 最后,Yii框架具有良好的社区支持和丰富的扩展库,如yiisoft/yii2-gii自动生成代码工具,yiisoft/yii2-debug调试工具,以及各种第三方组件,如用户认证和...
异步操作可以通过JavaScript和AJAX来实现,这样就不需要重新加载整个页面即可完成数据的删除。 在Yii2.0中实现js异步删除主要涉及到以下几个知识点: 1. 后端控制器的实现:在Yii2.0中,控制器负责处理用户的请求...
本篇文章主要探讨了如何在Yii2中结合Ajax技术实现表单数据的自动获取,特别是在用户选择表单中的某个值(例如邮政编码)后,自动填充关联的数据(如城市和省份)。这种功能常见于地址输入字段,能够提升用户填写表单...
7. **Ajax支持**:展示如何集成jQuery库,实现页面的部分更新和异步请求。 8. **模板和布局**:介绍如何创建和管理视图模板,使用布局优化用户体验。 9. **国际化和本地化**:讨论如何实现多语言支持,包括翻译和...
在本文中,我们将探讨如何使用Yii框架集成Pjax(Pushstate + Ajax)技术,以实现页面无刷新加载。Pjax结合了HTML5的history.pushState和Ajax技术,能够在用户浏览网站时无需完全刷新页面,从而提高响应速度和用户...
AJAX(Asynchronous JavaScript and XML)是一种异步通信技术,允许在不刷新页面的情况下与服务器进行数据交互。AJAX技术可以大大提高用户体验,减少服务器的负载。 在上述代码中,AJAX技术被用于与服务器进行数据...
4. **AJAX 集成**:Yii 提供了方便的 AJAX 功能,可以与 Kendo UI 的组件配合使用,实现异步更新和无刷新操作,提升用户体验。 5. **自定义主题**:Kendo UI 允许开发者定制主题,以匹配应用的整体风格。在“yii-...