100门课程在线学, 成为月入5万架构师

使用模式

大多数情况下,该插件可以配置为以下两种不同的模式之一进行上传。

重要信息:不要尝试组合下列模式来接收文件数据,因为您将收到不一致和/或错误的输出。

  1. 表单提交:在此模式下,您不能设置uploadUrl属性。该插件将使用本地文件输入来存储文件,并且可以在正常的from提交后读取文件(您必须在form中包含类型为fileinput标签)。这对于单个文件上传或简单的场景多个文件上传是有用的。配置非常简单,你可以从本机表单提交中读取POSTED的所有数据。但是,请注意,本地文件输入是只读的,不能被外部代码修改或更新。特别是对于多个文件输入选择,无法将单个文件增加到已选择的文件列表。如果尝试在已选择的文件输入按钮上再选择文件,它将覆盖并清除之前选择的文件。同样,在此模式下,无法选择移去/删除上传之前添加的文件。
  2. Ajax提交:在此模式下,你必须将uploadUrl属性设置为有效的ajax处理服务器action/URL。如果uploadUrl设置了,那么该插件会自动为该场景使用ajax上传。该插件提供了ajax提交的高级功能,这是表单提交提供不了的。如拖放文件,在预览区域中添加/删除文件,获取上传的进度条等功能只有在此模式下才可以实现。您的浏览器必须支持HTML5 FormData/XHR2才能正常工作,并且处理ajax调用的服务器代码必须返回有效的JSON响应。

注意 作为高级场景,插件允许你处理ajax上传,即使没有选择文件,但是使用有效的uploadExtraData也会得到ajax响应。这些事件filebatchpreuploadfilebatchuploadsuccessfilebatchuploadcompletefilebatchuploaderror将在这种情况下触发。即使没有任何的文件数据,它将允许发送额外的数据。

模式比较

模式比较
功能/要求 表格提交 Ajax提交
支持单个和多个文件上传 支持 支持
使用HTML 5 FileAPI预览文件 支持 支持
通过表单提交直接读取文件 支持 不支持
每个预览缩略图的单个文件删除图标 支持 1 支持2
每个预览缩略图的个人文件上传图标 不支持 支持
需要从服务器返回有效的JSON响应 不支持 支持
需要浏览器支持HTML5 FormData / XHR2 不支持 支持
服务器代码来处理ajax并发送JSON Response 不支持 支持
使用放置区拖放文件 不支持 支持
能够将文件附加到已选择的列表 不支持 支持
能够将文件删除到已选择的列表 支持 1 支持
上传进度栏 不支持 支持
阅读其他表单数据 直接通过表单提交
通过 uploadExtraData
  • 1 -通过initialPreviewConfig(仅适用于服务器上传的文件)。
  • 2 - 在运行环境中对服务器上传的文件(通过initialPreviewConfig)和客户端选择的文件。

results matching ""

    No results matching ""