使用输入类型文件提交Ajax表单

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>

Answer 1

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