Skip to content Skip to sidebar Skip to footer
Home / Asp.net Mvc / Dom / Forms / Html / Jquery

Hidden File Input Does Not Retain Value On Submit

Post a Comment
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 u

Solution 1:

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


Post a Comment for "Hidden File Input Does Not Retain Value On Submit"