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 相关文章推荐
php下利用curl判断远程文件是否存在的实现代码
Oct 08 PHP
windows环境下php配置memcache的具体操作步骤
Jun 09 PHP
php遍历文件夹下的所有文件和子文件夹示例
Mar 20 PHP
PHP中copy on write写时复制机制介绍
May 13 PHP
php递归json类实例
Dec 02 PHP
PHP面向对象之后期静态绑定功能介绍
May 18 PHP
php超快高效率统计大文件行数
Jul 05 PHP
PHP简单获取多个checkbox值的方法
Jun 13 PHP
PHP针对多用户实现更换头像功能
Sep 04 PHP
浅谈关于PHP解决图片无损压缩的问题
Sep 01 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
Feb 28 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
Apr 09 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
2020最新CPU的性能排名
2020/04/02 数码科技
把PHP安装为Apache DSO
2006/10/09 PHP
php扩展ZF――Validate扩展
2008/01/10 PHP
深入PHP购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
Python与shell的3种交互方式介绍
2015/04/11 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
python实现的发邮件功能示例
2019/09/11 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
pandas针对excel处理的实现
2021/01/15 Python
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
合作协议书
2014/04/23 职场文书
论文诚信承诺书
2014/05/23 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
小学生成绩单评语
2014/12/31 职场文书
小英雄雨来观后感
2015/06/09 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
分析Netty直接内存原理及应用
2021/06/14 Java/Android
Python实现制作销售数据可视化看板详解
2021/11/27 Python