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 parse_url 一个好用的函数
Oct 03 PHP
PHP原理之异常机制深入分析
Aug 08 PHP
PHP连接Access数据库的方法小结
Jun 20 PHP
10 个经典PHP函数
Oct 17 PHP
PHP实现视频文件上传完整实例
Aug 28 PHP
php实现过滤UBB代码的类
Mar 12 PHP
PHP实现的memcache环形队列类实例
Jul 28 PHP
php session 写入数据库
Feb 13 PHP
php单例模式的简单实现方法
Jun 10 PHP
PHP类的自动加载机制实现方法分析
Jan 10 PHP
php无限极分类实现方法分析
Jul 04 PHP
php项目中类的自动加载实例讲解
Sep 12 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
php 正则表达式小结
2009/08/31 PHP
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
js传值 判断
2006/10/26 Javascript
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
JS定时器实例
2013/04/17 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
Jquery easyUI 更新行示例
2014/03/06 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
2014幼儿园保育员工作总结
2014/11/10 职场文书
交警失职检讨书
2015/01/26 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP