File input gets cleared when attempted to submit on IE8
I'm working with AJAX uploads. As IE doesn't have the required object, I'll have to make a workaround with iframes.
On theory, it's pretty simple:
- Create a form and an iframe
- Change the form's target and iframe's name attribute
- When the input file field changes, the form will be submitted
Additionally, as the input file field sucks, it would be nice to have an "Upload" button that triggers the click event of the hidden input file field to open the file select dialog.
Yeah, that was theory. In reality, it's way worse. First, IE8 somehow doesn't like cloned iframes, so we'll have to append each one on the go. Then, the file input field gets cleared when the submit is attempted.
I figured out what happens and when and it's pretty ugly.
Head to this example and it works pretty good. The form gets cloned, the file field has data and the form is submitted. However, the file input has no name attribute, and I can't access it on the server side.
So I added the attribute, here's the example and this is what happens: the file field is cleared开发者_如何学Python. Just because the name attribute.It might be a dumb question, but is there a workaround with this? I'm well aware that if the file input field gets selected, it can trigger an auto upload, but I'm wondering if I can without requiring an actual click to the file field, just as in every sane browser.
Thanks.
you must click the input file in IE(for safe maybe), not click other button to trigger the click event.
<script>
$(function() {
var uploadFile = $('#uploadFile');
var txtUploadFile = $('#txtUploadFile');
var btnUploadFile = $('#btnUploadFile');
uploadFile.css('position', 'absolute')
.css('opacity', '0')
.width(30);
uploadFile.change(function() {
txtUploadFile.val(this.value);
});
btnUploadFile.mousemove(function(e) {
uploadFile.css('top', btnUploadFile.offset().top)
.css('left', e.pageX - uploadFile.width() / 2);
});
});
<body>
<form target="hiddenIframe" action="your_upload_site" method="post" enctype="multipart/form-data">
<input id="txtUploadFile">
<input id="btnUploadFile" type="button" value="Select">
<input id="uploadFile" name="uploadFile" type="file" />
<input type="submit" value="Upload">
</form>
<iframe name="hiddenIframe" style="display: none;"></iframe>
a little bit late but I had the same problem today and could resolve it. Use a label with a for-attribute pointing to the file-input.
Your html would look like this:
<label for=foo>Upload<label>
<form>
<input type=file id=foo>
<input type=submit>
</form>
At the click-Event of the label you only create the iframe. Then you have an onchange-Listener on the file input which triggers the form submit. My use case was a little bit different, so I am not a 100% sure if this works for you as well, but I think it should.
The name attribute for input[type=file] is read-only. According to http://msdn.microsoft.com/en-us/library/ms535128(v=vs.85).aspx:
Windows Internet Explorer 8 and later. When a file is selected by using the input type=file object, the value of the value property depends on the value of the "Include local directory path when uploading files to a server" security setting for the security zone used to display the Web page containing the input object.
The fully qualified filename of the selected file is returned only when this setting is enabled. When the setting is disabled, Internet Explorer 8 replaces the local drive and directory path with the string C:\fakepath\ in order to prevent inappropriate information disclosure.
To illustrate, suppose you attempt to upload a file named C:\users\contoso\documents\file.txt. When you do this, the value of the value property is set to c:\fakepath\file.txt.
EDIT: I can't really tell if this is the problem or not since you're question is a bit vague as to what you are trying to accomplish.
加载中,请稍侯......
精彩评论