ajaxFileUpload 异步上传文件配合PHP的使用

本人最近在学习PHP，并在用PHP写一个简单的个人博客网站的时候需要对个人的头像进行异步上传，经过研究，成功实现了ajaxFileUpload+PHP的异步上传功能，所以抽空做下总结，本文主要讲解ajaxFileUpload 异步上传文件配合PHP使用

jQuery插件ajaxFileUpload可以实现ajax文件上传，使用非常简单。

准备环境

jquery.js
ajaxfileupload.js

注意：jquery-1.4.2之后的版本和ajaxfileupload.js 报错：jQuery.handleError is not a function，详细解决方法可以参考我上一篇的博文http://blog.csdn.net/cckevincyh/article/details/70207882

ajaxfileupload原理

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

语法：$.ajaxFileUpload([options])

参数说明：

1，url 上传处理程序地址，也就是我发送给服务器端所要处理上传的地址。

2，fileElementId 需要上传的文件域的ID，即的ID。

3，secureuri 是否启用安全提交，默认为false。

4，dataType 服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。

5，success 提交成功后自动执行的处理函数，参数data就是服务器返回的数据。

6，error 提交失败自动执行的处理函数。

7，data 自定义参数。这个很有用，比如你上传图片的同时想把图片名也一起传过去，可以用这个参数去实现。

8，type 当要提交自定义参数时，这个参数要设置成post

---

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

静态页面的代码

<div class="form-group">   <label for="firstname" class="col-sm-1 control-label">头像</label>    <div class="col-sm-2">     <label for="inputfile"></label>    <input type="hidden" id="headImg"/>    <input type="file" id="headImgUpload" name="headImgUpload"/><br/>       <label class="control-label" for="headImgUpload" style="display: none;"></label>        <p class="help-block"><img class="img-rounded" src="#" width="100" height="100" id="img1" alt="请上传头像"  /></p>        </div>  </div>

显示结果如下：

引入js代码

ajaxHeardImgUpload.js文件如下：

$(document).ready(function(){    //解决file的change事件只能执行一次的问题    $(document).on('change','#headImgUpload',function(){        ajaxHeadImgUpload();    });});//上传头像图片的方法，function ajaxHeadImgUpload(){    //调用ajaxfileupload.js中的方法    $.ajaxFileUpload({        url:'/MyBlog/index.php?p=back&c=Uploader&a=uploaderHead',//上传图片要提交到的PHP后台Action方法        secureuri:false,//是否用安全提交，默认为false        fileElementId:'headImgUpload',//file选择文件的框的id        dataType:'json',//数据返回格式，如果用json，需要修改ajaxfileupload.js中的内容 eval("data = " + data ); -->data = jQuery.parseJSON(jQuery(data).text());        success: function (data){            if(data.success){                //获得json格式数据的值，并转换显示图片在页面上                 $("#img1").attr("src",data.path);                 $("#headImg").val(data.path);            }            showInfo(data.info);        },        error: function(data, status, e){   //提交失败自动执行的处理函数            alert(e);        }    });}function showInfo(msg) {    $("#div_info").text(msg);    $("#modal_info").modal('show');}

PHP中的处理上传的代码

<?php/** * Created by PhpStorm. * User: c * Date: 2017/4/17 * Time: 9:03 */class UploaderController extends BaseController {    //上传头像方法    public function uploaderHeadAction(){        $fileName = "headImgUpload";        $this->uploader($fileName);    }    //上传微信二维码方法    public function uploaderWeChatAction(){        $fileName = "wechatImgUpload";        $this->uploader($fileName);    }    public function uploader($fileName) {        $files = array();        $files['name'] = $_FILES[$fileName]['name'];   //上传图片的原名字        $files['info'] = ""; //和该文件上传相关的信息        $files['size'] = $_FILES[$fileName]['size'];   //已上传文件的大小，单位为字节        $files['type'] = $_FILES[$fileName]['type'];   //文件的 MIME 类型，需要浏览器提供该信息的支持，例如"image/gif"        $files['success'] = false;            //这个用于标志该图片是否上传成功        $files['path'] = '';                //存图片路径        //：0:表示没有发生错误        if($_FILES[$fileName]['error']==0){            //is_uploaded_file — 判断文件是否是通过 HTTP POST 上传的            if(is_uploaded_file($_FILES[$fileName]['tmp_name'])) {                    //扩展名                 $extension = '';                 //strcmp — 二进制安全字符串比较 （区分大小写）               // 如果 str1 小于 str2 返回 < 0； 如果 str1 大于 str2 返回 > 0；如果两者相等，返回 0。                 if(strcmp($_FILES[$fileName]['type'], 'image/jpeg') == 0) {                     $extension = '.jpg';                  }else if(strcmp($_FILES[$fileName]['type'], 'image/png') == 0) {                     $extension = '.png';                  }else if(strcmp($_FILES[$fileName]['type'], 'image/gif') == 0) {                     $extension = '.gif';                 }else{                     //如果type不是以上三者，我们就从图片原名称里面去截取判断去取得(处于严谨性)                     //strrchr — 查找指定字符在字符串中的最后一次出现                     $substr = strrchr($_FILES[$fileName]['name'], '.');                     if(FALSE != $substr) {                         $files['info'] = "文件类型有误";                     }                      //strcasecmp — 二进制安全比较字符串（不区分大小写），比较字符串是否相同                     //如果 str1 小于 str2 返回 < 0； 如果 str1 大于 str2 返回 > 0；如果两者相等，返回 0。                     //取得原名字的扩展名后，再通过扩展名去给type赋上对应的值                     if(strcasecmp($substr, '.jpg') == 0 || strcasecmp($substr, '.jpeg') == 0 || strcasecmp($substr, '.jfif') == 0 || strcasecmp($substr, '.jpe') == 0 ) {                         $files['type'] = 'image/jpeg';                     }else if(strcasecmp($substr, '.png') == 0) {                         $files['type'] = 'image/png';                     } else if(strcasecmp($substr, '.gif') == 0) {                         $files['type'] = 'image/gif';                     }else {                         $files['info'] = "上传的文件类型不符合";                     }                     $extension = $substr;//赋值扩展名                 }                 if(trim($files['info'])==""){                    //对临时文件名加密，用于后面生成复杂的新文件名                    $md5 = md5_file($_FILES[$fileName]['tmp_name']);                    //取得图片的大小                    //getimagesize() 函数将测定任何 GIF，JPG，PNG，SWF，SWC，PSD，TIFF，BMP，IFF，JP2，JPX，JB2，JPC，XBM                    // 或 WBMP 图像文件的大小并返回图像的尺寸以及文件类型                    //和一个可以用于普通 HTML 文件中 IMG 标记中的 height/width 文本字符串。                    $imageInfo = getimagesize($_FILES[$fileName]['tmp_name']);                    $rawImageWidth = $imageInfo[0];                    $rawImageHeight = $imageInfo[1];                    //设置图片上传路径，放在upload文件夹，以年月日生成文件夹分类存储，                    $path = ROOT . 'upload\\' . @date("Ymd"). '\\';                    ///确保目录可写                    if($this->ensure_writable_dir($path)){                        ////文件名                        $name = "$md5.0x{$rawImageWidth}x{$rawImageHeight}{$extension}";                        //加入图片文件没变化到，也就是存在，就不必重复上传了，不存在则上传                        $ret = file_exists($path . $name) ? true : move_uploaded_file($_FILES[$fileName]['tmp_name'], $path . $name);                        if ($ret === false) {                            $files['info'] = "上传失败";                        } else {                            $files['path'] = "\\MyBlog\\upload\\" . @date("Ymd"). '\\'. $name;        //存图片路径                            $files['success'] = true;            //图片上传成功标志                            $files['width'] = $rawImageWidth;    //图片宽度                            $files['height'] = $rawImageHeight;    //图片高度                            $files['info'] = "上传成功";//写入成功                        }                    }else{                        $files['info'] = "目录不可写";//目录不可写                    }                 }            }else{                $files['info'] = "上传失败";//上传失败            }        }        echo json_encode(array(            'success' =>  $files['success'],            'path' => $files['path'],            'info'=>$files['info'],         ));    }    /**     * 判断是否可写     * @param $dir     * @return bool     */    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)) {               return false;            }        }        return true;    }}

最后就可以看到上传结果了：

本例子的上传处理还对上传文件的类型进行限制，本例子限制只能上传图片，如果上传的类型不符合，会出现提示：

代码基本上都加上了注释，方便大家理解，虽然这里使用PHP做文件上传处理，但具体的上传思路都是相同的。如果你想看ajaxFileUpload +Struts2的简单使用，可以查看我的博文http://blog.csdn.net/cckevincyh/article/details/70198470