jQuery File Upload文件上传插件使用详解

　jQuery File Upload 是一个Jquery文件上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。

官网链接

　　特点拖放支持；上传进度条；图像预览；可定制和可扩展的；兼容任何服务器端应用平台（PHP, Python, Ruby on Rails, Java, Node.js, Go etc.）。

使用方法

1. 需要加载的js文件

jquey-1.8.3.min.js

jquery-ui-widget.js

jquery.iframe-transport.js

jquery.fileupload.js

2. html代码

<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>

3. js代码

$(function () {
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});

　　3.1 显示上传进度条　

　$('#fileupload').fileupload({
　　progressall: function (e, data) {
　　var progress = parseInt(data.loaded / data.total  100, 10);
　　$('#progress .bar').css(
　　'width',
　　progress + '%'
　　);
　　}
　　});

　　3.2 需要一个<div>容器用来显示进

　<div id="progress">
　　<div class="bar" style="width: 0%;"></div>
　　</div>

4. API

4.1 Initialization

在上传按钮上调用fileupload()方法;

示例

$('#fileupload').fileupload();

4.2 Options :

1: url请求发送的目标url

Type: string

Example: '/path/to/upload/handler.json'

2.Type: 文件上传HTTP请求方式，可以选择“POST”，“PUT”或者"PATCH",

默认"POST"

Type: string

Example: 'PUT'

3. dataType:希望从服务器返回的数据类型，默认"json"

Type: string

Example: 'json'

4. autoUpload:默认情况下，只要用户点击了开始按钮被添加至组件的文件会立即上传。将autoUpload值设为true可以自动上传。

Type: boolean

Default: true

5. aeptFileTypes允许上传的的文件类型

Example: /(\.|\/)(gif|jpe?g|png|xlsx)$/i

6. maxFileSize: 最大上传文件大小

Example: 999000 (999KB) //单位B

7. minFileSize:最小上传文件大小

Example: 100000 (100KB) //单位B

8.previewMaxWidth : 图片预览区域最大宽度

Example: 100 //单位px

4.3 Callback Options:

使用方法一函数属性

实例

$('#fileupload').fileupload({
　　drop: function (e, data) {
　　$.each(data.files, function (index, file) {
　　alert('Dropped file: ' + file.name);
　　});
　　},
　　change: function (e, data) {
　　$.each(data.files, function (index, file) {
　　alert('Selected file: ' + file.name);
　　});
　　}
　　});

使用方法二绑定事件监听函数

　　实例

$('#fileupload')
　　　　.bind('fileuploaddrop', function (e, data) {/ ...