zoukankan      html  css  js  c++  java
  • 【转】ASP.Net中FileUpLoad控件内容清空

    内容来源:http://hi.baidu.com/h520/blog/item/880c5c081a5699930a7b8200.html
    ASP.Net中FileUpLoad控件内容清空
    2008年09月02日 星期二 下午 01:44

    对于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>  



  • 相关阅读:
    【Nginx】ngx_event_core_module模块
    ELMAH--Using HTTP Modules and Handlers to Create Pluggable ASP.NET Components 77 out of 90 rated th
    nyist oj 214 单调递增子序列(二) (动态规划经典)
    java 入门书籍(java7)
    ARCGIS将WGS84坐标投影到高斯平面
    【linux】linux下对java程序生成dump文件,并使用IBM Heap Analyzer进行分析,查找定位内存泄漏的问题代码
    【springboot】【socket】spring boot整合socket,实现服务器端两种消息推送
    【linux】linux修改open file 大小
    【docker】docker限制日志文件大小的方法+查看日志文件的方法
    【docker】docker部署spring boot服务,但是docker logs查看容器输出控制台日志,没有日志打印,日志未打印,docker logs不打印容器日志
  • 原文地址:https://www.cnblogs.com/chshnan/p/1537579.html
Copyright © 2011-2022 走看看