当前位置：首页 > 资讯 > 技术文档

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

时间：2021-04-05 06:03 编辑：来源：阅读：
扫一扫，手机访问

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

　jQuery File Upload 是一个Jquery文件上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。官网链接：[url=https://github.com/blueimp/jQuery-File-Upload/wiki]https://github.com/blueimp/jQuery-File-Upload/wiki[/url] 　　特点：拖放支持；上传进度条；图像预览；可定制和可扩展的；兼容任何服务器端应用平台（PHP, Python, Ruby on Rails, Java, Node.js, Go etc.）。 [b]使用方法：[/b] [b]1. 需要加载的js文件：[/b] jquey-1.8.3.min.js jquery-ui-widget.js jquery.iframe-transport.js jquery.fileupload.js [b]2. html代码：[/b]

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

[b]3. js代码：[/b]

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

　　[b]3.1 显示上传进度条：[/b]　

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

　　[b]3.2 需要一个<div>容器用来显示进：[/b]

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

[b]4. API[/b] [b]4.1 Initialization：[/b] 在上传按钮上调用fileupload()方法; 示例： [code]$('#fileupload').fileupload();[/code] [b]4.2 Options :[/b] 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 8.previewMaxWidth : 图片预览区域最大宽度 Example: 100 //单位：px 4.3 Callback Options: [b]使用方法一：函数属性[/b] 实例：

$('#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);
　　});
　　}
　　});

[b]使用方法二：绑定事件监听函数[/b] 　　实例：

$('#fileupload')
　　　　.bind('fileuploaddrop', function (e, data) {/* ... */})
　　　　.bind('fileuploadchange', function (e, data) {/* ... */});

每个事件名称都添加前缀：”fileupload”; 注意推荐使用第二种方法。常用的回调函数： 1. add: 当文件被添加到上传组件时被触发

$('#fileupload').bind('fileuploadadd', function (e, data) {/* ... */});

或者$('#fileupload').on('fileuploadadd', function (e, data) {/* ... */}); 2. processalways: 当一个单独的文件处理队列结束（完成或失败时）触发 3. progressall: 全局上传处理事件的回调函数 Example:

$('#fileupload').on('fileuploadprogressall', function (e, data) { //进度条显示
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
});

4. fail : 上传请求失败时触发的回调函数，如果服务器返回一个带有error属性的json响应这个函数将不会被触发。 5. done : 上传请求成功时触发的回调函数，如果服务器返回一个带有error属性的json响应这个函数也会被触发。 6. always : 上传请求结束时（成功，错误或者中止）都会被触发。以上所述是小编给大家介绍的jQuery File Upload文件上传插件使用详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持！

全部评论(0)

上一篇：Android获取当前位置的经纬度数据
下一篇：在AngularJS中如何使用谷歌地图把当前位置显示出来

资讯排行榜
更多>>