隐藏文件输入在提交时不保留值答案

【问题标题】：Hidden file input does not retain value on submit隐藏文件输入在提交时不保留值
【发布时间】：2013-10-18 12:42:10
【问题描述】：

我有一个带有假按钮的隐藏文件输入和用于浏览器显示一致性的输入。我目前也可以看到原始输入，并且发现使用它上传文件一切正常。

但是，使用“dummyfile”中的按钮通过 javascript 触发点击，该值按预期加载，在 UI 中也是如此。但是，当我这次单击提交时，它会清除输入中的值，并且什么也不做。这仅发生在 IE 中，而不发生在 chrome 中。这是我之前问过的问题的根源：https://stackoverflow.com/questions/19275901/internet-explorer-specific-form-post-with-file-input-returning-empty-file-list。我将此作为一个单独的问题提出，因为它的相关性超出了该问题的范围。

HTML（这是在部分视图中，因此我可以添加更多输入并返回文件集合，我只是将其拉出到主视图并硬编码了 0 以解决这个问题和另一个错误）。

<div class="control-group">
   <label class="control-label" for='@String.Format("file{0}", 0)'>File</label>
   <div class="controls">
         <input type="file" name="files" class="hiddenFileInput" id='@String.Format("file{0}", 0)' />
         <div class="dummyfile">
              <input id="@String.Format("filename{0}", 0)" type="text" class="input disabled" name="filename" >
              <button type="button" class="btn btn-primary">Choose</button>
         </div>
    </div>
</div>

jQuery:

function fileUploadControlInit() {

        $('.dummyfile .btn').unbind("click").on("click", function (e) {
            $(this).closest("div").siblings(" :file").trigger('click');
        });

        $('.hiddenFileInput').on("change", function (e) {
            var val = $(this).val();
            var file = val.split(/[\\/]/);
            var fileName = file[file.length - 1];
            $(this).siblings("div").children(" :text").val(fileName);


            $("#UploadFile").prop('disabled', false);

        });
    }

【问题讨论】：

可能与您的 dummyfile div 中的 class="input disabled" 有关
不，这只是防止打字，除此之外是控件保留其值。

标签： jquery html asp.net-mvc forms dom

【解决方案1】：

这是 Internet Explorer 中内置的安全限制（我已经测试了 v6.0 到 v10），是的，它允许您以编程方式单击浏览按钮，但它会在您提交表单时清除该框 - 基本上是为了阻止用户防止被骗上传文件。

因此，您的选择是采用不同的样式方法，此示例基本上使原始按钮在您样式精美的按钮之上变得不透明（感谢 Andrew here）：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>



  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
    input[type=file] {
    opacity: 0;
    position: absolute;
    top:0;
    left: 0;
}

.button-container {
    position: relative;
}

.fake-button {
    border: 3px inset #933;
    pointer-events:none;
    z-index: -100;
}
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){

});//]]>  

</script>


</head>
<body>
  <form method="post" enctype="multipart/form-data" action="http://google.com/">
    <div class="button-container">
        <span class="fake-button">fake button</span>
        <input type="file" name="file" id="id_file" />
    </div>
    <input type="submit" />
</form>

</body>

</html>

在other post 上也提到过，这里有一个很好的关于文件上传框的各种浏览器样式的文章：http://www.quirksmode.org/dom/inputfile.html

【讨论】：