JQuery插件ajaxFileUpload 异步上传文件（PHP版）

太久没写博客了，真的是太忙了。善于总结，进步才会更快啊。不多说，直接进入主题。

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

　　一、先对ajaxFileUpload插件的语法参数进行讲解

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

　　语法：$.ajaxFileUpload([options])

　　参数说明：

　　1，url　　　　　　　　　　上传处理程序地址，也就是我发送给服务器端所要处理上传的地址。　　
　　2，fileElementId　　　　　需要上传的文件域的ID，即<input type="file" id="file">的ID。
　　3，secureuri　　　　　　　是否启用安全提交，默认为false。
　　4，dataType　　　　　　　服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
　　5，success　　　　　　　　提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
　　6，error　　　　　　　　　提交失败自动执行的处理函数。
　　7，data 　　　　　　　　　自定义参数。这个很有用，比如你上传图片的同时想把图片名也一起传过去，可以用这个参数去实现。
　　8，type 　　　　　　　　　当要提交自定义参数时，这个参数要设置成post

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

　　1、先引入ajaxFileUpload这个插件。

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

2、贴上HTML的代码。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
</head>
<script src="/fileupload/js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="/fileupload/js/ajaxfileupload.js" type="text/javascript"></script>
<body>
 <input type="file" id="id_photos" name="id_photos" value="上传" />
</body> 
</html>

<script>
    $(document).ready(function(){
        $("#id_photos").change(function(){
            $.ajaxFileUpload({
                url: "upload.php",
                type : "post",
                fileElementId : "id_photos",
                dataType : 'json',
                success :function(msg){
                    console.log(msg);
                }
            });
        });
    });
</script>

这里我对每一行的代码都基本写上了注释方便大家理解。流程就是上传图片给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
        }
    ]
}