Extjs实现文件上传
2013-05-27 21:37
323 查看
文件上传是WEB系统一个基本功能,在一个Form提交到服务器后,如果form的contentType是“multipart/form-data”类型,服务器就会认为这是文件提交。上传文件一般都是单独处理,不能同时处理Form中的其它表单。但是后台可以通过一定手段得到文件输入流之外的表单数据。比如邮件系统中处理附件时候,同时也处理了收件人,标题,内容等信息。来看下ExtJS中怎么实现这样的功能:
按正常方式创建一个FormPanel, 同时需要加入一个属性:fileUpload, 当这个属性为真时,就会声明当前FORM是一个带上传的FORM,其实就是把contentType改为“multipart/form-data”。
有了上传的容器,就可以在items属性中加入一个文件选择控件了,同样很简单,用正常的TextField来处理,指定inputType为"file"类型即可:
这时候,这个Form已经能够进行选择文件并上传了。
接下来的问题是,一般编辑框在新增后都不会关闭,而是清空所有表单并允许继续增加,很自然的我们会调用this.form.reset()来清空当前form,但是很不幸,你会发现在IE下,选择的文件并没有从编辑框中消失,这个问题在纯HTML的表单中如果有类型为reset的按钮,在点击了reset后是会被清空的。
其实,FormPanel的本质也是一个FORM, 因此可以用处理html表单的办法来处理这个问题:
items中增加一个JS对象:
{html:'<input id="resetForm" type=reset style="display:none;">',border:false}
注意使用了样式display,并设置为none来告诉FormPanel不要显示这个表单。
然后就可以调用document.getElementByIdx('resetForm').click(),调用后,文件选择控件中的文件名就正常清除掉了。
按正常方式创建一个FormPanel, 同时需要加入一个属性:fileUpload, 当这个属性为真时,就会声明当前FORM是一个带上传的FORM,其实就是把contentType改为“multipart/form-data”。
有了上传的容器,就可以在items属性中加入一个文件选择控件了,同样很简单,用正常的TextField来处理,指定inputType为"file"类型即可:
new Ext.form.TextField({ allowBlank:false, fieldLabel: '文件', id:'uploadFile', name:'uploadFile', anchor:'90%', inputType:'file' }) |
接下来的问题是,一般编辑框在新增后都不会关闭,而是清空所有表单并允许继续增加,很自然的我们会调用this.form.reset()来清空当前form,但是很不幸,你会发现在IE下,选择的文件并没有从编辑框中消失,这个问题在纯HTML的表单中如果有类型为reset的按钮,在点击了reset后是会被清空的。
其实,FormPanel的本质也是一个FORM, 因此可以用处理html表单的办法来处理这个问题:
items中增加一个JS对象:
{html:'<input id="resetForm" type=reset style="display:none;">',border:false}
注意使用了样式display,并设置为none来告诉FormPanel不要显示这个表单。
然后就可以调用document.getElementByIdx('resetForm').click(),调用后,文件选择控件中的文件名就正常清除掉了。
相关文章推荐
- EXTJS使用H5 formdata实现多文件上传
- Extjs 实现文件上传
- jsp+Extjs实现动态显示文件上传进度
- SWFUpload 和Extjs3.3 + swfUpload2.2 实现多文件上传组件
- [转]ExtJs入门之filefield:文件上传的配置+结合Ajax完美实现文件上传的asp.net示例
- extjs3.2+struts2实现多文件上传excel并插入到数据库
- jsp+Extjs实现动态显示文件上传进度
- extjs asp.net成功实现文件上传
- Extjs3.3 + swfUpload2.2 实现多文件上传组件
- extjs实现文件上传
- extjs实现简单的多文件上传(不借助任何插件),以及包含处理上传大文件的错误的各种处理办法
- Extjs+C# 实现文件上传
- Extjs中用dwr实现文件上传时,fileuploadfield不能正常显示的问题
- extjs采用fileupload进行文件上传后台实现
- 利用jsp+Extjs实现动态显示文件上传进度
- ExtJS+Jquery实现文件上传
- Extjs+Asp.net实现上传大文件带实时进度条
- Extjs3 + swfUpload实现多文件上传控件
- extjs与struts2整合实现文件上传之经历
- Extjs+Struts实现文件文件上传问题集锦