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

2020-05-27 17:59:41易采站长站整理

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) {/* ... */})
    .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文件上传插件使用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持!