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 } ] }