首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

file下传组件,失败后内容清空

2012-11-12 
file上传组件,失败后内容清空一、file上传组件input typefile iduploadFile /二、遇到的问题:当出现

file上传组件,失败后内容清空

一、file上传组件

<input type="file" id="uploadFile" />

二、遇到的问题:

当出现文件类型不符合等失败情况后,希望将组件中的地址清空

即:<input type="file" id="uploadFile"? value=""/>

在FF下直接使用this.value = ""即可,但是IE却不能达到预期效果

?

三、解决方案:

1、使用document.execCommand('Delete', false, null)

分析:

这个方案可以在IE下达到效果,只是同时也引入了新的问题:如果不刷新页面,IE下无法进行第二次提交

IE下会有“拒绝访问”的提示。

2、使用form.reset()将上传组件内容清空

需求:form中有其他字段,不刷新页面,不希望清空

解决方式:

1)新建一个tempForm为临时form

2)将原Form中的钙file组件加入到tempForm中

3)tempForm.reset()将file组件内容清空

4)将file组件再移回原Form

示例代码:

if (!_vali['_v2'].validate()) {// 验证失败
??????? ??? ??? this.value = ''; // FF 清空输入内容
??????? ??? ??? // IE清空内容
??????? ??? ??? var zipFileInput = D.get('zipFile');
??????? ??? ??? if(zipFileInput && zipFileInput.value != ''){
??????? ??? ??? ??? var tempForm = document.forms['tempForm'];
??? ??????? ??? ??? tempForm.appendChild(zipFileInput);
??? ??????? ??? ??? tempForm.reset();
??? ??????? ??? ??? var afterZipFile = D.get('zipFile-advice');
??? ??????? ??? ??? if(afterZipFile){
??? ??????? ??? ??? ??? D.insertBefore(tempForm['zipFile'], afterZipFile);
??? ??????? ??? ??? }
??? ??????? ??? ??? tempForm.removeChild(zipFileInput);
??????? ??? ??? }
??????? ??? }

?

热点排行