Ajax form submit with input type file

Question

I am using ajax to submit a form that browses, uploads and then processes a file using PHP. I hate the standard html input type="file" button (as most people do) so used a trick to click the standard "browse" button from another button (id="fileSelect") that I can eventually customize. Works great in safari and others, but with IE the ajax code line that submits the form does not fire. Other elements of the ajax code are executed (I get the alert("Ajax complete"); at the end), but the "$("#imageform").ajaxForm({target: '#preview'}).submit();" line does not work in IE.

Ajax code:

$(document).ready(function() 
{       
    $('#xfile').live('change', function()   // when there is an even on the 'file' element (like file selected)
    { 
        $("#preview").html('');  // clears the preview area
        $("#preview").html('<img src="general_images/loading.gif" alt="Uploading...."/>');  // displays the loading
        $("#imageform").ajaxForm({target: '#preview'}).submit();
        alert ("Ajax complete");
    });
});

And HTML Code:

<div>
<button id="fileSelect" onclick="document.getElementById('xfile').click();">Insert Picture</button>
<form style="display: inline" id="imageform" name="imageform" action="upload_file_journal.php" method="post" target="_blank" enctype="multipart/form-data">
    <input style="visibility: hidden" type='file' name='xfile' id='xfile' /
</form>

score 0 · Answer 1 · answered Feb 27 '14 at 14:24

0

This will not work in IE 9 and older(I think it works in IE 10,11).

The only real option is to use absolute positions to place your upload control on top of your button, then set the opacity to 0.1, then they look like they are clicking a button, but are actually clicking the input, you have to super size the file input to ensure they always click the button part.

Even doing that is a hassle though. Hope this helps

answered Feb 27 '14 at 14:24

QBM5

2,778
2
17
24

So the javascript works fine if it's triggered by the native input type="file" button, but not when the button is triggered by the fileSelect button. I tried it using IE10 but it doesn't work. I'm curious as to why it doesn't trigger submit in the jquery code. Perhaps it's just a deep IE implementation issue that I shouldn't really care about... just force IE users to use the native button. – FredASL Feb 27 '14 at 14:58
Yeah, it was for security from what I've read. And from my own experience you can open the file input using jquery and a secondary button, but the input will not work as desired. The data will never make it to the server, look at this post, it seems to show what I am describing for a fix, http://stackoverflow.com/questions/793014/jquery-trigger-file-input – QBM5 Feb 27 '14 at 15:27

Ajax form submit with input type file

1 Answers1