Hidden File Input Does Not Retain Value On Submit
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><metahttp-equiv="content-type"content="text/html; charset=UTF-8"><title> - jsFiddle demo</title><scripttype='text/javascript'src='//code.jquery.com/jquery-1.9.1.js'></script><linktype="text/css"href="/css/result-light.css"><styletype='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><scripttype='text/javascript'>//<![CDATA[
$(window).load(function(){
});//]]>
</script></head><body><formmethod="post"enctype="multipart/form-data"action="http://google.com/"><divclass="button-container"><spanclass="fake-button">fake button</span><inputtype="file"name="file"id="id_file" /></div><inputtype="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"