jQuery File Upload 是一个Jquery文件上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端。
官网链接:https://github.com/blueimp/jQuery-File-Upload/wiki
特点:拖放支持;上传进度条;图像预览;可定制和可扩展的;兼容任何服务器端应用平台(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. acceptFileTypes:允许上传的的文件类型
Example: /(.|/)(gif|jpe?g|png|xlsx)$/i
6. maxFileSize: 最大上传文件大小
Example: 999000 (999KB) //单位:B
7. minFileSize:最小上传文件大小
Example: 100000 (100KB) //单位:B










