2023年7月3日发(作者：)

PHP结合jQuery插件ajaxFileUpload实现异步上传⽂件实例平时⽤的⽐较多的JQuery图⽚上传插件是Uploadify这个插件，效果很不错，但是由于⼿机不⽀持flash，所以不得不再找⼀个⽂件上传插件来⽤了。后来发现ajaxFileUpload这个插件挺不错，所以就⽤这个插件来做异步上传⽂件的效果。⽹上也有很多对ajaxFileUpload插件的使⽤的⽂章，不过我发现没有PHP版，所以这次服务器那边的处理就使⽤PHP语⾔来处理。⼀、详解ajaxFileUpload插件的语法参数　　原理：ajaxfileupload是通过监听iframe的onload⽅法来实现， 当从服务端处理完成后，就触发iframe的onload事件调⽤其绑定的⽅法，在绑定的⽅法中获取iframe中服务器返回的数据体（⽀持的普通⽂本,json,xml,script, html）　　语法：$.ajaxFileUpload([options])⼆、接下来我们看看如何去使⽤1、先引⼊ajaxFileUpload这个插件。　　这⾥我⽤的是jq1.11.1版本，⽹上有说jq版本与ajaxfileupload的版本要对应才不会有异常报错，反正我现在这个没错误。2、贴上HTML的代码。

　　此处主要的是这⼀句代码，其他的不⽤管，因为这⾥我是在⼿机端，⽤的是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 != ) return;　　 //因为此处指允许上传单张图⽚，所以数量如果不是1，那就是有错误了 var url = [0].path;　　 $('.id_photos').empty(); //此处效果是：当成功上传后会返回⼀个json数据，⾥⾯有url，取出url赋给img标签，然后追加到.id_photos类⾥显⽰出图⽚ $('.id_photos').append(''); //$('.upload-box').remove(); }, error: function(data, status, e){ //提交失败⾃动执⾏的处理函数 alert(e); } })});　　这⾥我对每⼀⾏的代码都基本写上了注释⽅便⼤家理解。流程就是上传图⽚给去处理，处理成功返回json数据，然后在json中取出url值，将其赋给img标签⾥，然后将img标签追加带页⾯显⽰出来。　　这⾥我附上json返回的数据：{ "total": 1, "success": 1, "files": [ { "srcName": "", "error": 0, "size": 10715, "type": "image/jpeg", "success": true, "path": "/upload/20150528/", "width": 124, "height": 126 } ]}　　上传前HTML页⾯是这样的：　　异步上传成功后HTML页⾯效果是这样⼦的：　　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⾥都还是可以的。

更多精彩内容请参考专题，和进⾏学习。以上就是使⽤JQuery插件ajaxFileUpload 异步上传⽂件的整⼀个分析过程，希望对⼤家的学习有所帮助。