Question

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

然而，使用“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);

        });
    }

Answer 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

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

1 个答案: