jQuery File upload 上传简介

  jQuery文件上传插件由提供文件上传API的基本版(jquery.fileupload.js)和提供完整用户界面(jquery.fileupload-ui.js)的附加插件组成。基本版本的所有选项都存在于 UI版本,而后者引入了一些额外的选项。

AJAX选项

  jQuery文件上传插件使用jQuery.ajax()来处理文件上传请求。由于可以通过Iframe传输插件,即使不支持XHR的浏览器也可以保证上传。
  为文件上传插件设置的选项会作为jQuery.ajax()的参数,并允许定义任何ajax设置或回调。
  ajax选项processData,contentType和缓存设置为false,以使文件上传正常工作,不应更改。
  超时设置设置为0. 以下选项也由插件设置,但可以用于自定义:

###url

  请求发送的URL。
如果未定义或为空,则将其设置为文件上传表单的action属性(如果可用),否则设置为当前页面的URL。

类型:字符串
示例:’/path/to/upload/handler.json’

###type
  文件上传的HTTP请求方法。 可以设置为“POST”,“PUT”或“PATCH”,默认为“POST”。

类型:字符串
示例:‘PUT’
注意:
只有支持XHR文件上传的浏览器才支持“PUT”和“PATCH”,因为iframe传输上传依赖于只支持“POST”文件上传的标准HTML表单。
如果类型定义为“PUT”或“PATCH”,则iframe传输将通过“POST”发送文件,并将原始方法作为“_method”URL参数传输。

注意:如上所述,通常使用“_method”来传输请求的类型。 例如,“Ruby on Rails”框架在每个表单中使用名称为“_method”的隐藏输入,因此它很可能会覆盖您在此处设置的值。

###dataType
  从服务器返回的数据类型。
注意:默认情况下,文件上载插件的UI版本将此选项设置为“json”。

类型:字符串
示例:‘json’

General Options

###dropZone
  drop目标jQuery对象,默认情况下是完整的文档。
设置为null或空的jQuery集合以禁用拖放支持:

类型:jQuery对象
默认值:$(document)
注意:
如果要允许特定放置区域,但禁用文档上的文件放置的默认浏览器操作,请添加以下JavaScript代码:

$(document).bind('drop dragover', function (e) {
    e.preventDefault();
});

请注意,需要禁止“drop”和“dragover”事件的默认操作,才能禁用默认的浏览器放置操作。

###done
  回调成功上传请求。 这个回调等效于jQuery ajax()提供的成功回调,如果服务器返回一个带error属性的JSON响应,也会被调用。

function (e, data) {
    // data.result
    // data.textStatus;
    // data.jqXHR;
}

###progressall
  回调全局上传进度时间

function (e, data) {
    var progress = parseInt(data.loaded / data.total * 100, 10);
}

Callback Options

###add
add回调可以理解为文件上传请求队列的回调。一旦将文件添加到fileupload窗口小部件,就会调用它 - 通过文件输入选择,拖放或添加API调用。
data参数允许重载插件选项以及定义ajax设置。
data.files包含上传请求的文件列表:如果启用singleFileUploads选项(这是默认值),则将为选择的XHR文件上传中的每个文件调用一次add回调,并使用data.files数组长度为一,因为每个文件是单独上传的。否则,将为每个文件选择调用一次add回调。

当对data参数调用submit方法时,上传开始。
data.submit()返回一个Promise对象,并允许使用jQuery的Deferred回调附加其他处理程序。

如果autoUpload选项设置为true(基本插件的默认值),则默认添加回调提交文件。它还处理文件在上传之前的进程,如果任何进程处理程序已注册。

默认:

function (e, data) {
    if (data.autoUpload || (data.autoUpload !== false &&
            $(this).fileupload('option', 'autoUpload'))) {
        data.process().done(function () {
            data.submit();
        });
    }
}

举例

function (e, data) {
    $.each(data.files, function (index, file) {
        console.log('Added file: ' + file.name);
    });
    data.url = '/path/to/upload/handler.json';
    var jqXHR = data.submit()
        .success(function (result, textStatus, jqXHR) {/* ... */})
        .error(function (jqXHR, textStatus, errorThrown) {/* ... */})
        .complete(function (result, textStatus, jqXHR) {/* ... */});
}

###submit
回调每个文件上传的提交事件。
如果此回调返回false,则不会启动文件上传请求。

function (e, data) {
    var input = $('#input');
    data.formData = {example: input.val()};
    if (!data.formData.example) {
      data.context.find('button').prop('disabled', false);
      input.focus();
      return false;
    }
}

###processalways

回调单个文件处理队列的结束(done或fail)。

例:

function(e,data){
     console.log('Processing'+ data.files [data.index] .name +'ended。');
}}

###previewMaxWidth

预览图像的最大宽度。

类型:整数
默认值:80
###previewMaxHeight

预览图像的最大高度。

类型:integer
默认值:80
###previewCrop

定义预览图片是否应裁剪或仅缩放。

类型:boolean
默认值:false

Validation options

###acceptFileTypes
允许的文件类型的正则表达式,与文件类型或文件名匹配,仅用于浏览器支持的fileapi文件类型。

类型:正则表达式
默认值:undefined
示例:/(.|/)(gif|jpe?g|png)$/i

Image Preview & Resize Options

###disableImageResize
禁用调整大小图像功能。

类型:boolean
默认值:true

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值