PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例


Posted in PHP onAugust 17, 2020

平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了。后来发现ajaxFileUpload这个插件挺不错,所以就用这个插件来做异步上传文件的效果。网上也有很多对ajaxFileUpload插件的使用的文章,不过我发现没有PHP版,所以这次服务器那边的处理就使用PHP语言来处理。

一、详解ajaxFileUpload插件的语法参数

原理:ajaxfileupload是通过监听iframe的onload方法来实现, 当从服务端处理完成后,就触发iframe的onload事件调用其绑定的方法,在绑定的方法中获取iframe中服务器返回的数据体(支持的普通文本,json,xml,script, html)

语法:$.ajaxFileUpload([options])

PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例

二、接下来我们看看如何去使用

1、先引入ajaxFileUpload这个插件。

<script src="jquery-1.11.1.js" type="text/javascript"></script>
<script src="ajaxfileupload.js" type="text/javascript"></script>

这里我用的是jq1.11.1版本,网上有说jq版本与ajaxfileupload的版本要对应才不会有异常报错,反正我现在这个没错误。

2、贴上HTML的代码。

<div data-role="fieldcontain" class="upload-box">
 <label for="id_photos"><span class="red">* </span>您的有效证件照:</label>
  <input type="file" id="id_photos" name="id_photos" value="上传" style="filter:alpha(opacity=10);-moz-opacity:10;opacity:10;" /> 
 <p style="margin-top:0.5em;color:#999;font-size:11pt;">说明:请上传手持证件的半身照,请确保照片内证件信息清晰可读。</p>
 </div>
 <div class="id_photos" >
 
 </div>

此处主要的是<input type="file" id="id_photos" name="id_photos" value="上传">这一句代码,其他的不用管,因为这里我是在手机端,用的是jqueryMobile插件。

3、到js代码进行处理。

$(document).bind('pageinit', function(){
 //照片异步上传
 $('#id_photos').change(function(){ //此处用了change事件,当选择好图片打开,关闭窗口时触发此事件
 $.ajaxFileUpload({
 url:'/uploader/', //处理图片的脚本路径
 type: 'post', //提交的方式
 secureuri :false, //是否启用安全提交
 fileElementId :'id_photos', //file控件ID
 dataType : 'json', //服务器返回的数据类型 
 success : function (data, status){ //提交成功后自动执行的处理函数
 if(1 != data.total) return; //因为此处指允许上传单张图片,所以数量如果不是1,那就是有错误了
 var url = data.files[0].path;
 $('.id_photos').empty();
 //此处效果是:当成功上传后会返回一个json数据,里面有url,取出url赋给img标签,然后追加到.id_photos类里显示出图片
 $('.id_photos').append('<img src="'+url+'" value="'+url+'" style="width:80%" >');
 //$('.upload-box').remove();
 },
 error: function(data, status, e){ //提交失败自动执行的处理函数
 alert(e);
 }
 })
});

这里我对每一行的代码都基本写上了注释方便大家理解。流程就是上传图片给uploader.php去处理,处理成功返回json数据,然后在json中取出url值,将其赋给img标签里,然后将img标签追加带页面显示出来。

这里我附上json返回的数据:

{
 "total": 1,
 "success": 1,
 "files": [
 {
 "srcName": "3.jpg",
 "error": 0,
 "size": 10715,
 "type": "image/jpeg",
 "success": true,
 "path": "http://m.kellyblog.com/upload/20150528/857f4a35664b4a665e713322306d73b2.0x124x126.jpg",
 "width": 124,
 "height": 126
 }
 ]
}

上传前HTML页面是这样的:

PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例

异步上传成功后HTML页面效果是这样子的:

PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例

4、看看PHP是如何处理的

class UploaderController extends XXXX_Controller {
 public function index() {
 $files = array();
 $success = 0; //用户统计有多少张图片上传成功了
 
 foreach ($_FILES as $item) {
 $index = count($files);

 $files[$index]['srcName'] = $item['name']; //上传图片的原名字
 $files[$index]['error'] = $item['error']; //和该文件上传相关的错误代码
 $files[$index]['size'] = $item['size']; //已上传文件的大小,单位为字节
 $files[$index]['type'] = $item['type']; //文件的 MIME 类型,需要浏览器提供该信息的支持,例如"image/gif"
 $files[$index]['success'] = false; //这个用于标志该图片是否上传成功
 $files[$index]['path'] = ''; //存图片路径

 // 接收过程有没有错误
 if($item['error'] != 0) continue;
 //判断图片能不能上传
 if(!is_uploaded_file($item['tmp_name'])) {
 $files[$index]['error'] = 8000;
 continue;
 }
 //扩展名
 $extension = '';
 if(strcmp($item['type'], 'image/jpeg') == 0) {
 $extension = '.jpg';
 }
 else if(strcmp($item['type'], 'image/png') == 0) {
 $extension = '.png';
 }
 else if(strcmp($item['type'], 'image/gif') == 0) {
 $extension = '.gif';
 }
 else {
 //如果type不是以上三者,我们就从图片原名称里面去截取判断去取得(处于严谨性) 
 $substr = strrchr($item['name'], '.');
 if(FALSE == $substr) {
  $files[$index]['error'] = 8002;
  continue;
 }

 //取得元名字的扩展名后,再通过扩展名去给type赋上对应的值
 if(strcasecmp($substr, '.jpg') == 0 || strcasecmp($substr, '.jpeg') == 0 || strcasecmp($substr, '.jfif') == 0 || strcasecmp($substr, '.jpe') == 0 ) {
  $files[$index]['type'] = 'image/jpeg';
 }
 else if(strcasecmp($substr, '.png') == 0) {
  $files[$index]['type'] = 'image/png';
 }
 else if(strcasecmp($substr, '.gif') == 0) {
  $files[$index]['type'] = 'image/gif';
 }
 else {
  $files[$index]['error'] = 8003;
  continue;
 }
 $extension = $substr;
 }

 //对临时文件名加密,用于后面生成复杂的新文件名
 $md5 = md5_file($item['tmp_name']);
 //取得图片的大小
 $imageInfo = getimagesize($item['tmp_name']);
 $rawImageWidth = $imageInfo[0];
 $rawImageHeight = $imageInfo[1];

 //设置图片上传路径,放在upload文件夹,以年月日生成文件夹分类存储,
 //rtrim(base_url(), '/')其实就是网站的根目录,大家自己处理
 $path = rtrim(base_url(), '/') . '/upload/' . date('Ymd') . '/';
 //确保目录可写
 ensure_writable_dir($path);
 //文件名
 $name = "$md5.0x{$rawImageWidth}x{$rawImageHeight}{$extension}";
 //加入图片文件没变化到,也就是存在,就不必重复上传了,不存在则上传
 $ret = file_exists($path . $name) ? true : move_uploaded_file($item['tmp_name'], $serverPath . $name);
 if($ret === false) {
 $files[$index]['error'] = 8004;
 continue;
 }
 else {
 $files[$index]['path'] = $path . $name; //存图片路径
 $files[$index]['success'] = true; //图片上传成功标志
 $files[$index]['width'] = $rawImageWidth; //图片宽度
 $files[$index]['height'] = $rawImageHeight; //图片高度
 $success ++; //成功+1
 }
 }

 //将图片已json形式返回给js处理页面 ,这里大家可以改成自己的json返回处理代码
 echo json_encode(array(
 'total' => count($files),
 'success' => $success,
 'files' => $files,
 ));
 }
}
/*********************************分割*************************************************/
//这里我附上ensure_writable_dir()函数的代码
/**
* 确保文件夹存在并可写
*
* @param string $dir
*/
function ensure_writable_dir($dir) {
 if(!file_exists($dir)) {
 mkdir($dir, 0766, true);
 chmod($dir, 0766);
 chmod($dir, 0777);
 }
 else if(!is_writable($dir)) {
 chmod($dir, 0766);
 chmod($dir, 0777);
 if(!is_writable($dir)) {
 throw new FileSystemException("目录 $dir 不可写");
 }
 }
}

代码基本上都加上了注释,方便大家理解,虽然是用PHP处理图片上传,但你理解了上传时程序代码所处理的逻辑思路,将思路用于.net或者java里都还是可以的。 

更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

以上就是使用JQuery插件ajaxFileUpload 异步上传文件的整一个分析过程,希望对大家的学习有所帮助。

PHP 相关文章推荐
MySQL GBK→UTF-8编码转换
May 24 PHP
PHP base64+gzinflate压缩编码和解码代码
Oct 03 PHP
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
Dec 25 PHP
浅析十款PHP开发框架的对比
Jul 05 PHP
php实现mysql数据库分表分段备份
Jun 18 PHP
php简单统计在线人数的方法
May 10 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
Jun 13 PHP
CI框架表单验证实例详解
Nov 21 PHP
Python中使用django form表单验证的方法
Jan 16 PHP
PHP单例模式与工厂模式详解
Aug 29 PHP
php实现微信支付之企业付款
May 30 PHP
PHP加MySQL消息队列深入理解
Feb 27 PHP
PHP如何通过AJAX方式实现登录功能
Nov 23 #PHP
最新制作ThinkPHP3.2.3完全开发手册
Nov 23 #PHP
php生成4位数字验证码的实现代码
Nov 23 #PHP
3种php生成唯一id的方法
Nov 23 #PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
Nov 23 #PHP
PHP语法小结之基础和变量
Nov 22 #PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
Nov 19 #PHP
You might like
FCKeditor的安装(PHP)
2007/01/13 PHP
php下载文件的代码示例
2012/06/29 PHP
浅析关于PHP位运算的简单权限设计
2013/06/30 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
小程序开发之模态框组件封装
2020/04/23 Javascript
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
介绍一下grep命令的使用
2012/06/28 面试题
人力资源管理毕业生自荐信
2013/11/21 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技