隐藏的文件输入在提交时不保留值 [英] Hidden file input does not retain value on submit
问题描述
但是，使用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-labelfor ='@ String.Format（file {0}，0）'> File< / label>
< div class =controls>
< input type =filename =filesclass =hiddenFileInputid ='@ String.Format（file {0}，0）'/>
< div class =dummyfile>
< input id =@ String.Format（filename {0}，0）type =textclass =input disabledname =filename>
< button type =buttonclass =btn btn-primary>选择< / button>
< / div>
< / div>
< / div>
jQuery：
code> 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）。 ：文本）val（fileName）;
$（＃UploadFile）。prop（'disabled'，false）;
}）;
}
进入Internet Explorer（我已经测试v6.0到v10），是的，它允许您以编程方式点击浏览按钮，但是当您提交表单时，它将会清除框 - 基本上是阻止用户被欺骗上传文件。 p>
所以你的选择是采取不同的方法来设计样式，这个例子基本上使原来的按钮不透明的你的漂亮风格的按钮（信用安德鲁这里）：
<！DOCTYPE html> ;
< html>
< head>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8>
< title> - jsFiddle演示< / title>
< script type ='text / javascript'src ='// code.jquery.com/jquery-1.9.1.js'></script>
< link rel =stylesheettype =text / csshref =/ css / result-light.css>
< style type ='text / css'>
input [type = file] {
opacity：0;
position：absolute;
顶部：0;
左：0;
}
.button-container {
position：relative;
}
.fake-button {
border：3px inset＃933;
指针事件：无;
z-index：-100;
}
< / style>
< script type ='text / javascript'> //<！[CDATA [
$（window） {
}）; //]]>
< / script>
< / head>
< body>
< form method =postenctype =multipart / form-dataaction =http://google.com/>
< div class =button-container>
< span class =fake-button>假按钮< / span>
< input type =filename =fileid =id_file/>
< / div>
< input type =submit/>
< / form>
< / body>
< / html>
在其他帖子这里有一个很好的写入文件上传框的各种浏览器样式： http://www.quirksmode.org/dom/inputfile.html
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);
});
}
This is a security restriction built into Internet Explorer (I've tested v6.0 to v10), yes it allows you to programatically click the browse button but it will clear the box when you submit the form - basically to stop users from being tricked into uploading files.
So your options are to take a different approach to styling, this example basically makes the original button opaque on top of your nicely styled button (credit to 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>
Also mentioned on the other post there's a good write up of the various browser styling of file upload boxes here : http://www.quirksmode.org/dom/inputfile.html
这篇关于隐藏的文件输入在提交时不保留值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
