太久没写博客了，真的是太忙了。善于总结，进步才会更快啊。不多说，直接进入主题。
前几天想在手机端做个异步上传图片的功能，平时用的比较多的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 } ] }