zoukankan      html  css  js  c++  java
  • 重置表单元素file的方法(兼容ie8)

    表单中经常有需要上传文件的表单项,但是这是一个比较特殊的表单控件,在各个浏览器中的呈现方式都不一样。在IE中,它的呈现方式是不可输入的输入框加按钮;在Chrome下,它的呈现方式是一个按钮加右边的文件名,如果没有文件被选中,则显示“No file chosen”。FF和IE8显示相同。

    除了呈现方式不同之外,其特殊性也表现在其value属性上。因为安全性的问题,我们不能设置它的value值,甚至连读它的value值都不是我们想要的。在IE8下,读value值可以返回真实的文件路径;而在Chrome下则只能返回“C:fakepath”+文件名;FF下则只有文件名。

    更加棘手的问题是,一旦选中了某个文件,怎么将表单项reset。在Chrome下最简单,直接再点按钮,选择cancel就可以reset了;在FF和IE8下就不行了。在Chrome和FF下,我们可以通过js将input的value设置为空来重置其值,但是在IE8下,value值无法通过js设置。

    这样,当需要重置input的值的时候,就不能单纯的通过设置input的value来重置了。

    如果可以的话,最简单的方法就是选择input所在的form,调用form的reset方法,这样就没有兼容性问题了。但是我们经常需要对单个的input进行reset而不是整个表单。所以,可以直接将整个input用原来的html替换掉:

    var file = document.getElementById(inputId);
    file.outerHTML = file.outerHTML;

    这样,就可以直接重置input。在MDN给出的outerHTML的浏览器兼容性为:

    Feature    Firefox (Gecko)    Chrome    Internet Explorer    Opera    Safari
    Basic support    (11)    0.2    4.0    7    1.3
    也可以通过cloneNode方法,复制file input,并调用父节点的replaceNode方法替换原来的input:

    var file = document.getElementById(inputId);
    file.value=”";
    file.parentNode.replaceChild(file.cloneNode(true),file);

    如果中间那句不加的话,火狐下只会复制,不会reset。

    如果使用jQuery,可以使用下面的方法:

    $(inputId).replaceWith($(inputId).val('').clone(true));

    代码中设置input的value为空是因为FF和Chrome可以接受value值设置。

  • 相关阅读:
    03.yaml语法和playbook写法
    02.ansible的常用模块
    01.ansible基本配置与使用
    24.删除表名
    23.MySQL的备份与恢复
    22.更改表名
    MySQL的表操作
    MySQL的库操作
    MySQL的用户管理
    数据库及MySQL概述
  • 原文地址:https://www.cnblogs.com/samve/p/13823624.html
Copyright © 2011-2022 走看看