如何清除FileUpload中的文件

如何清除FileUpload中的文件

对于file值是只读的，我们没有办法去改变它，不过一些变相的方法还是可以的。 方法一：上传控件基础知识说明：上传控件（input type="file"/）用于在客户端浏览并上传文件，用户选取的路径可以由value属性获取，但value属性是只读的，不能通过javascript来赋值，这就使得不能通过value=""语句来清空它。很容易理解为什么只读，如果可以随意赋值的话，那么用户只要打开你的网页，你就可以随心所欲的上传他电脑上的文件了，呵呵，毕竟表单的submi是可以随便调用的。而上传控件又没有一个clear()之类的函数，所以这使得无刷新上传文件显得稍稍不爽，尤其对于追求完美的开发者而言。然而今天在做一个Asp.net控件时却发现不得不需要清空一下上传控件，于是便开始想办法。网上搜索一番，不出所料，没有找到什么结果。关键时刻只能靠自己了。仔细想想，上传控件是不是任何时候都不可能被清空呢？答案是否，form.reset()方法能够重置所有得表单元素。只要调用inputFile.form.reset()，那么上传控件的值就清空了，不要担心它被恢复为某个默认值，value是只读的，你不能为它设置某个初始值。于是开始设想，如果我只需要reset一下上传控件，怎么解决？其他的表单元素要保持原状。一个可行的方法是，reset之前获取所有的表单域的值，之后再用这些值填充，虽然显得稍微复杂，但借助prototype框架的Form对象提供的方法，还是很容易做到的。这样就能够得到需要的结果了。然而这个方法还是不够优雅，沿着思路继续想下去，不难得到改进的方法：创建一个新的form，把上传控件临时放过来，再调用这个form的reset方法，完工之后再把上传控件弄回去。这个form无需进入DOM结构便能正常工作，所以不用担心会对界面有任影响。下面给出函数实现，经过验证工作良好，呵呵。程序代码//清空文件上传框function clearFileInput(file){ var form=document.createElement('form'); document.body.appendChild(form); //记住file在旧表单中的的位置 var pos=file.nextSibling; form.appendChild(file); form.reset(); pos.parentNode.insertBefore(file,pos); document.body.removeChild(form);}方法2 用这个方法不能保存input的样式比较简单了 重新建立个 file 就可以了。程序代码span id=span1 input name=ab type=file /span input name=button1 type=button value="按" onclick=show() script language=javascript function show() { document.getElementById("span1").innerHTML="input name=ab type=file } /script 方法3，用这个方法可以保存input的样式 input name=button1 type=button value="按" onclick=show() script language=javascript function show() { var e=document.getElementById("span1"); e.outerHTML=e.outerHTML; } /script

jquery异步上传，一般来说这里上传调用的是系统专门上传的action，上传好后返回上传文件信息。你这里result.files就是返回的上传结果。这个需要你在后台自己封装。你前端需要什么，后台就封装什么。 比如我以前写过一个 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 map fileobject = new hashmap(); fileinfo.put("size", size);//原始文件大小 fileobject.put("original", original);//原始文件唯一标识 fileobject.put("originalpath", originalpath);//原始文件临时存储目录 fileobject.put("thumb", thumb);//图片的预览文件唯一标识 fileobject.put("thumbpath", thumbpath);//图片预览文件临时存储目录 fileobject.put("name", filefilename);//原始图片名称 fileobject.put("url", url);//原始图片的web查看地址,这个可以设置img.src属性 fileobject.put("thumbnailurl", thumbnailurl);//预览图片的web查看地址 fileobject.put("contenttype", filecontenttype);//上传文件type fileobject.put("deletetype", "post");//这是我自己封装的post删除 //这个是我自己封装的删除路径 fileobject.put("deleteurl", super.getrequest().getcontextpath() + "/removeupload.do?id=" + original); map[] filearray = new hashmap[1]; filearray[0] = fileobject; jsonobject jsonobject = new jsonobject(); jsonobject.put("files", jsonarray.fromobject(filearray)); httpservletresponse response = getresponse(); response.setcontenttype("application/json;charset=utf-8"); response.getwriter().write(jsonobject.tostring()); response.getwriter().flush(); 而前断可以将上传文件的唯一标识放到一个隐藏域里，表单提交的时候一起提发送到后台，再根据唯一标识去取上传文件信息或写或复制转移。 前断fileuploaddone我是这么用的 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 on('fileuploaddone', function(e , data){ //上传结果 $.each(data.result.files, function(index , file){ if (file.url) { var link = $('').attr('target', '_blank').prop('href', file.url); //这个是文件上传后的展示区域，可以在fileuploadadd事件里构建 var $imgdiv = $(data.context.children()[index]); var $link = $imgdiv.find("canvas").wrap(link); $imgdiv.append($('').prop('value', file.original)); $imgdiv.append($('').prop('value', file.name)); } else if (file.error) { var error = $('').text(file.error); $(data.context.children()[index]).append(error); } }); })