jQuery File Upload 是一款非常强大的文件上传处理插件，支持多文件上传，拖拽上传，进度条，文件验证及图片音视频预览，跨域上传等等。
可以说你能想到的功能它都有。你没想到的功能它也有。。
不过由于功能太强大，使用起来还是需要点基本功，否则调试开发会遇到困难。
本文结合官方教程只介绍最基本的上传功能。
以我目前最新的9.7.1版本
下载下来解压到服务器能访问到的地方。
文件如下：
1. 新建一个文件夹MyDemo或者你随意。
把外面的server和js目录拷贝到里面，注意server目录里面包含gae-go、gae-python、php这些后端语言，只保留php就行。
2. 新建一html，内容如下，主要JS和CSS的路径。还有有时候国内无法访问ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js，可以引用本地的jQuery。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>jQuery File Upload Example</title> <style> .bar { height: 18px; background: green; } </style> </head> <body> <input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/vendor/jquery.ui.widget.js"></script> <script src="js/jquery.iframe-transport.js"></script> <script src="js/jquery.fileupload.js"></script> <script> $(function () { $('#fileupload').fileupload({ dataType: 'json', // 上传完成后的执行逻辑 done: function (e, data) { $.each(data.result.files, function (index, file) { $('<p/>').text(file.name).appendTo(document.body); }); }, // 上传过程中的回调函数 progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $(".bar").text(progress + '%'); $('#progress .bar').css( 'width', progress + '%' ); } }); }); </script> <!-- 进度条 --> <div id="progress"> <div class="bar" style=" 0%;"></div> </div> </body> </html>
传统上都是用<form>表单提交上传，现在是纯Ajax。需要注意的input的data-url属性，这就是需要php服务端处理的路径。
浏览器打开，以我的为例 http://localhost/my/JS/Plugins/jQuery-File-Upload-master/MyDemo/
由于是在本地测试，为了看到进度进度效果，建议找个大点的(~1G)文件上传。可以直接拖个文件到浏览器窗口中。
效果如下，上传过程中绿色进度条会不停的增加。
F12打开调试面板，耐心等待上传完成，会看到上传完成后，有ajax返回。
地址类似：http://localhost/my/JS/Plugins/jQuery-File-Upload-master/MyDemo/server/php/
返回的数据是JSON格式，内容类似：
{"files":[{"name":"1409665745-8365","size":1472358262,"type":"multipart/form-data; boundary=----WebKitFormBoundaryxLzvFFmSOiWiY1Ka","error":"The uploaded file exceeds the post_max_size directive in php.ini"}]}
很明显上传文件太大了，超出php.ini限制。先不改了。
如果我们直接丢个图片进去，返回的json类似：
{ "files": [ { "name": "10095978136d36c635.jpg", "size": 12479, "type": "image/jpeg", "url": "http://localhost/my/JS/Plugins/jQuery-File-Upload-master/MyDemo/server/php/files/10095978136d36c635.jpg", "thumbnailUrl": "http://localhost/my/JS/Plugins/jQuery-File-Upload-master/MyDemo/server/php/files/thumbnail/10095978136d36c635.jpg", "deleteUrl": "http://localhost/my/JS/Plugins/jQuery-File-Upload-master/MyDemo/server/php/?file=10095978136d36c635.jpg", "deleteType": "DELETE" } ] }
来到MyDemoserverphpfiles 会发现上传的图片，而且thumbnail目录还保存了裁剪过的图片，这都是官方提供的UploadHandler.php的功劳。
至此，一个拖拽上传文件的Demo完成了。但是功能仍然很弱，比如没有文件类型及大小限制，没有前台的错误提示。
官方提供的API有maxFileSize和acceptFileTypes。这在基本版里是不生效的，在UI版里才可以。具体的完善功能见第二篇