隐藏的文件输入不会保留提交的价值

我有一个隐藏的文件输入与假按钮和浏览器显示一致性的输入。我目前也有可见的原始输入，并且发现使用它来上传文件一切正常。隐藏的文件输入不会保留提交的价值

但是使用“dummyfile”中的按钮触发通过javascript进行点击，该值按预期方式加载，以及在UI中加载。但是，当我点击这次提交时，它会从输入中清除该值，而不会执行其他操作。这只发生在IE中，而不是铬。这是我之前询问的问题的来源：https://stackoverflow.com/questions/19275901/internet-explorer-specific-form-post-with-file-input-returning-empty-file-list。我问这是一个单独的问题，因为它超出了范围。（这是在局部视图中，所以我可以添加更多的输入并返回一个文件集合，我只是将它拉出到主视图，并为此和另一个错误硬编码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); 

     }); 
    }

来源

2013-10-10 Seth

也许它与'class =“输入禁用”'在你的dummyfile分区 – CSharper

不，这只是防止打字，除此之外是控制保持其价值。 – Seth

这是内置的Internet Explorer（我测试过的V6.0到V10）安全限制，是的，它可以让你以编程方式单击浏览按钮，但它会当您提交表单时清除该框 - 基本上阻止用户被骗入上传文件。

那么你的选择是采取不同的方式来造型，这个例子基本上使得原来的按钮不透明对你很好风格的按钮（信贷安德鲁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

来源

2014-01-31 11:48:18

隐藏的文件输入不会保留提交的价值

回答

相关问题