我有一个带有假按钮的隐藏文件输入和用于浏览器显示一致性的输入。我目前也可以看到原始输入，并且发现使用它上传文件一切运行正常。
然而，使用“dummyfile”中的按钮通过 javascript 触发点击，该值将按预期加载，并且在 UI 中也是如此。但是，当我这次单击“提交”时，它会清除输入中的值，并且不执行任何其他操作。这只发生在 IE 中，而不会发生在 chrome 中。这是我之前问过的问题的根源：https://stackoverflow.com/questions/19275901/internet-explorer-specific-form-post-with-file-input-returning-empty-file-list 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);
});
}
这是 Internet Explorer 中内置的安全限制（我已经测试了 v6.0 到 v10），是的，它允许您以编程方式单击浏览按钮，但在您提交表单时它会清除该框 - 基本上是为了防止用户被欺骗进入上传文件。
因此，您的选择是采用不同的样式方法，此示例基本上使原始按钮在样式精美的按钮之上变得不透明（归功于 Andrewhere https://stackoverflow.com/a/18875072/1111494):
<!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>
上也提到了其他帖子 https://stackoverflow.com/a/18875072/1111494这里对文件上传框的各种浏览器样式进行了很好的描述：http://www.quirksmode.org/dom/inputfile.html http://www.quirksmode.org/dom/inputfile.html
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
