使用模式
大多数情况下,该插件可以配置为以下两种不同的模式之一进行上传。
重要信息:不要尝试组合下列模式来接收文件数据,因为您将收到不一致和/或错误的输出。
- 表单提交:在此模式下,您不能设置
uploadUrl
属性。该插件将使用本地文件输入来存储文件,并且可以在正常的from
提交后读取文件(您必须在form
中包含类型为file
的input
标签)。这对于单个文件上传或简单的场景多个文件上传是有用的。配置非常简单,你可以从本机表单提交中读取POSTED
的所有数据。但是,请注意,本地文件输入是只读的,不能被外部代码修改或更新。特别是对于多个文件输入选择,无法将单个文件增加到已选择的文件列表。如果尝试在已选择的文件输入按钮上再选择文件,它将覆盖并清除之前选择的文件。同样,在此模式下,无法选择移去/删除上传之前添加的文件。 - Ajax提交:在此模式下,你必须将
uploadUrl
属性设置为有效的ajax
处理服务器action/URL
。如果uploadUrl设置了,那么该插件会自动为该场景使用ajax上传。该插件提供了ajax提交的高级功能,这是表单提交提供不了的。如拖放文件,在预览区域中添加/删除文件,获取上传的进度条等功能只有在此模式下才可以实现。您的浏览器必须支持HTML5 FormData/XHR2
才能正常工作,并且处理ajax调用的服务器代码必须返回有效的JSON响应。
注意
作为高级场景,插件允许你处理ajax上传,即使没有选择文件,但是使用有效的uploadExtraData
也会得到ajax响应。这些事件filebatchpreupload
、filebatchuploadsuccess
、filebatchuploadcomplete
或 filebatchuploaderror
将在这种情况下触发。即使没有任何的文件数据,它将允许发送额外的数据。
模式比较
功能/要求 | 表格提交 | Ajax提交 |
---|---|---|
支持单个和多个文件上传 | 支持 | 支持 |
使用HTML 5 FileAPI预览文件 | 支持 | 支持 |
通过表单提交直接读取文件 | 支持 | 不支持 |
每个预览缩略图的单个文件删除图标 | 支持 1 | 支持2 |
每个预览缩略图的个人文件上传图标 | 不支持 | 支持 |
需要从服务器返回有效的JSON响应 | 不支持 | 支持 |
需要浏览器支持HTML5 FormData / XHR2 | 不支持 | 支持 |
服务器代码来处理ajax并发送JSON Response | 不支持 | 支持 |
使用放置区拖放文件 | 不支持 | 支持 |
能够将文件附加到已选择的列表 | 不支持 | 支持 |
能够将文件删除到已选择的列表 | 支持 1 | 支持 |
上传进度栏 | 不支持 | 支持 |
阅读其他表单数据 | 直接通过表单提交 |
通过
uploadExtraData |
- 1 -通过
initialPreviewConfig
(仅适用于服务器上传的文件)。 - 2 - 在运行环境中对服务器上传的文件(通过
initialPreviewConfig
)和客户端选择的文件。