Question

In my web app,I need to upload a single file when a user selects that file and stay on the same html page.I am looking for a non-flash solution which probably uses jquery.and something which works on firefox.

By googling,I came across many plugins,most of them using elaborate html pages for showing input widgets / upload status indicators etc.I need something which I can use like this,using ajax.

mypage.html

<input type="file" id="myfileselect" > </input>

myjs.js

$(document).ready(function(){
   $('#myfileselect').change(function(e){
       //upload the file somehow
   }

});

Is this possible?Can someone illustrate how I can do this?

Answer 1

I use this plugin in all my projects. Once the user selects the file, you simply call

$('#yourForm).ajaxSubmit()

and it will asynchronously upload your file.

http://jquery.malsup.com/form/

In your case, you would do it like this:

HTML

<form id="myForm">
<input type="file" id="myfileselect" > </input>
</form>

JQuery

$(document).ready(function(){
    //set the options here
    var options = {
        url : 'yourScript.php',
        method : 'post'
    };

   $('#myfileselect').change(function(e){
       $('#myForm').ajaxSubmit(options);
   }
});