Jquery文件上传是一个jQuery文件上传组件，支持多文件上传、取消和删除。上传前，支持缩略图预览和列表显示图片大小，支持上传进度条显示。支持各种动态语言开发的服务器端。本文主要介绍jQuery文件上传文件上传插件的使用，有需要的朋友可以参考一下。
Jquery文件上传是一个jQuery文件上传组件，支持多文件上传、取消和删除。上传前，支持缩略图预览和列表显示图片大小，支持上传进度条显示。支持各种动态语言开发的服务器端。
链接到https://github.com/blueimp/jQuery-File-Upload/wiki,官方网站
特点：支持拖拽；上传进度条；图像预览；可定制和可扩展；兼容任何服务器端应用平台(PHP、Python、Ruby on Rails、Java、Node.js、Go等。).
使用方法：
1. 需要加载的js文件：
jquey-1.8.3.min.js
jquery-ui-widget.js
jquery.iframe-transport.js
jquery.fileupload.js
2. html代码：
输入id=' file upload ' type=' file ' name=' files[]' data-URL=' server/PHP/' multiple
3. js代码：
$(function () {
$('#fileupload ')。文件上传({
数据类型：' json '，
完成：函数(e，数据){
$.每个(数据.结果.文件，函数(索引，文件){
$('p/')。文本(文件名)。appendTo(document . body)；
});
}
});
});
3.1 显示上传进度条：
$('#fileupload ')。文件上传({
progressall: function (e，data) {
var progress=parse int(data . loaded/data . total * 100，10)；
$(' #进度。酒吧)。css(
宽度'，
进度“%”
);
}
});
3.2 需要一个div容器用来显示进：
div id='progress '
div class=' bar ' style=' width:0%；'/div
/div
4. API
4.1 Initialization：
在上传按钮上调用fileupload()方法；
示例：
$('#fileupload ')。file upload()；
4.2 Options :
1: url:请求发送到的url。
类型：字符串
示例：“/path/to/upload/handler.json”
2.类型：文件上传的HTTP请求方式，可以选择“POST”、“PUT”或“PATCH”，
默认“发布”
类型：字符串
示例：“上传”
3.dataType:要从服务器返回的数据类型。默认值为“json”
类型：字符串
示例：“json”
4.autoUpload:默认情况下，一旦用户单击start按钮，添加到组件的文件将立即上传。将autoUpload值设置为true以自动上传。
类型：布尔型
默认值：真
5.acceptFileTypes:允许上传的文件类型。
示例：/(\。|\/)(gif|jpe？g|png|xlsx)$/i
6.maxFileSize:最大上传文件大小
示例：999000(999 kb)///单位：B
7.minFileSize:上传文件的最小大小
示例：100000 (100KB) //单位：B
8.previewMaxWidth:图片预览区域的最大宽度
示例：100 //单位：像素
4.3回拨选项：
使用方法一：函数属性
示例：
$('#fileupload ')。文件上传({
drop:函数(e，数据){
$.每个(数据.文件，函数(索引，文件){
alert(' Dropped file:' file . name ')；
});
},
变化：函数(e，数据){
$.每个(数据.文件，函数(索引，文件){
alert('所选文件：' file . name ')；
});
}
});
使用方法二：绑定事件监听函数
示例：
$('#fileupload ')。bind('fileuploaddrop '，function (e，data) {/*.*/})。bind('fileuploadchange '，function (e，data) {/*.*/});
每个事件名称都带有前缀“file upload”；
推荐第二种方法。
常用的回调函数有：
1.add:当文件被添加到上传组件时触发。
$('#fileupload ')。bind('fileuploadadd '，function (e，data) {/*.*/});
或者$ ('# fileupload ')。on ('fileupload add '，函数(e，data) {/*.*/});
2.processalways:当单个文件处理队列完成(完成或失败)时触发
3.progressall:全局上传处理事件的回调函数。
示例：
$ ('# FileUpload ')。On ('FileUpload Progressal '，function (e，data){//进度条显示
var progress=parse int(data . loaded/data . total * 100，10)；
$(' #进度。进度条)。css(
宽度'，
进度“%”
);
});
4.失败：上传请求失败时触发的回调函数。如果服务器返回一个带有错误属性的json响应，这个函数将不会被触发。
5.done:上传请求成功时触发的回调函数。如果服务器返回一个带有错误属性的json响应，这个函数也会被触发。
6.总是：当上传请求结束(成功、错误或中止)时，将被触发。
以上是边肖推出的jQuery文件上传插件的详细说明。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对我们网站的支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。