• ASP.Net中FileUpLoad控件内容清空


    ASP.Net中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>

  • 相关阅读:
    log4j的使用
    转:http与https
    转:归一化与正则化
    转:python 的开源库
    转:openTSDB 2.0 安装
    hadoop 2.2.0编译安装及打包
    查看磁盘信息
    HBase Region的flush过程
    HBase96的RPC
    阐述二维码的原理以及使用google api和PHP QR Code来生成二维码
  • 原文地址:https://www.cnblogs.com/azumia/p/3036833.html
Copyright © 2020-2023  润新知