4

I have a hidden file input with a fake button and input for browser display consistency. I currently have the original input visible as well, and have discovered that using it to upload the file everything runs fine.

However using the button in "dummyfile" to trigger the click via javascript the value is loaded as expected, as well as in the UI. But when I click submit this time, it instead clears the value from the input and does nothing else. This only happens in IE, not in chrome. It is the source of the problem in a question I asked previously: https://stackoverflow.com/questions/19275901/internet-explorer-specific-form-post-with-file-input-returning-empty-file-list. I ask this as a separate question because it is relevant beyond the scope of that one.

HTML (this is in a partial view so I can add more inputs and return a file collection, I just pulled it out to the main view and hard coded the 0 in for this and another bug).

<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);

        });
    }
4

1 回答 1

2

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

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

<!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>

在另一篇文章中也提到了这里有一个很好的文件上传框的各种浏览器样式：http ://www.quirksmode.org/dom/inputfile.html

于 2014-01-31T11:48:18.067 回答