【问题标题】:Clearing file input box in Internet Explorer清除 Internet Explorer 中的文件输入框
【发布时间】:2023-03-03 23:15:02
【问题描述】:

我的页面上有一个文件上传框和一个清除按钮。当我按下清除按钮时,我希望文件上传框中的文本被清除。

以下内容在 Firefox 中有效,但在 IE 中无效(文本保留在那里)。有解决办法吗?

$("#clear").click( function() {
    $("#attachment").val("");
    //document.myform.attachment.value = "";
})

HTML:

<form name="myform">
    <input type="file" name="attachment" id="attachment" />
</form>
<br /><button id="clear">Clear Attachment</button>

jsFiddle

【问题讨论】:

标签: javascript jquery html internet-explorer file-upload


【解决方案1】:

我发现的一个解决方案就是这样做:

document.getElementById('myUploadField').parentNode.innerHTML = document.getElementById('myUploadField').parentNode.innerHTML;

似乎它不应该工作,但它确实。

【讨论】:

  • 太棒了。谢谢一堆。
【解决方案2】:

这个解决方案比克隆输入元素更优雅。您将&lt;form&gt; 包裹在元素周围,在表单上调用reset,然后使用unwrap() 删除表单。与上面的 clone() 解决方案不同,您最终会得到相同的元素(包括在其上设置的自定义属性)。

在 Opera、Firefox、Safari、Chrome 和 IE6+ 中测试和工作。也适用于其他类型的表单元素,除了 type="hidden"。

http://jsfiddle.net/rPaZQ/

function reset(e) {
  e.wrap('<form>').closest('form').get(0).reset();
  e.unwrap();
}​

【讨论】:

  • 如果您不想完全重置,非常有用。
  • 这很棒。谢谢。
  • 像魅力一样工作..谢谢。 :)
  • 不是万无一失的解决方案。值可能会从 UI 上的输入字段中清除,但仍然可以从 $("#myFileUpload").val() 访问
【解决方案3】:

它在IE8 onwards 中是只读的,所以你不能清除它。绕过此安全功能的最简单方法是将元素替换为副本。

编辑 找到了一个先前的答案,建议使用相同的方法! Clearing <input type='file' /> using jQuery

【讨论】:

    【解决方案4】:

    这对我有用:

     $("input[type='file']").replaceWith($("input[type='file']").clone(true));

    【讨论】:

      【解决方案5】:

      使用简单的javascript:

      formname.reset();
      

      查看演示:http://jsfiddle.net/rathoreahsan/YEeGR/

      【讨论】:

      • 表单上有多个字段时有点问题。
      【解决方案6】:

      尝试使用以下方法清除输入文件。

      包括这个脚本:

       <script>
       function clearFileInputField(tagId) {
       document.getElementById(tagId).innerHTML =
          document.getElementById(tagId).innerHTML;
      }
      </script>
      

      把 HTML 改成这样:

      <div id="uploadFile_div">
      <input type="file" class="fieldMoz" id="uploadFile" onkeydown="return false;" size="40" name="uploadFile"/>
      </div>
      <a onclick="clearFileInputField('uploadFile_div')" href="javascript:noAction();">Clear</a>`
      

      【讨论】:

        【解决方案7】:

        使用老式的&lt;input type="reset" value="clear this"&gt;

        【讨论】:

        • 那不会重置整个表单吗?我想避免这种情况。
        • 你给出的例子只有一个元素,所以我认为这很好。
        • 抱歉给您带来了困惑。我想理论上我可以保存其他表单元素的值并在之后重新加载它们。 :P
        • @tskuzzy:如果表单中有多个文件字段,则以后无法重新加载它们。
        猜你喜欢
        • 2013-03-28
        • 1970-01-01
        • 2015-02-13
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2011-02-07
        • 2015-02-03
        • 1970-01-01
        相关资源
        最近更新 更多