Jquery, Auto submitting a file after selection?

docock · 03-19-2013, 01:32 PM

I've changed my 'file upload' input field into a hyperlink, which looks much better.
I also added an auto submit, so that when the file is picked it gets automaticly submitted (normally you first select the file, and then have to hit the submit button).

Everything works perfectly, except for the auto submit, which doesn't seem to function in Internet Explorer.
How can I make this coding work in every browser?

Code:

 <style type="text/css">
 #file {
    display:none;
 }
 
 .new_Btn {
 color:blue;
 cursor:pointer;
 }
</style>

 
 <script type="text/javascript" 

                     src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type="text/javascript"> 


$(function () {

$('.new_Btn').bind("click" , function () {
        $('#file').click();
    });

$('#file').change(function() {
  $('#target').submit();
});

$('.new_Btn').change(function() {
  $('#target').submit();
});

});  
</script>

<html>
<body>

<form id='target' action='http://www.test.com' method='post' enctype='multipart/form-data'>
<div class='new_Btn'>Select file</div><br>
<input type='file' name='file' id='file'><br>
</form>

</body>
</html>

Ps: It works fine in Firefox, Chrome etc. but not in IE 8.0 (which is used by a lot of XP users).

glenngv · 03-20-2013, 07:24 AM

If you want, you can try this jQuery File Upload plugin.

https://github.com/blueimp/jQuery-File-Upload

glenngv · 03-20-2013, 07:28 AM

Or this:

http://stackoverflow.com/questions/2...put-file-on-ie