Upload Images With Ajax?

This time my question is the following: I want to upload images using a file input and instead of refreshing the whole I site, I want a simple AJAX loader to roll and after a few s

Solution 1:

You won't be able to upload a file using Javascript(AJAX). I'm not sure of HTML5 features for uploading, but if you are looking to do an upload for desktop browsers you'll have to use plugin-based software. Something like flash or java will be able to upload files without submitting the file to a new page. I'd look into pre-build solutions that will work for what you need.

Solution 2:

You can easily use ajaxupload to send images to the server side and then get the image on the success return of the function.

 $("#form1").ajaxForm({
          target: '#preview',
          beforeSubmit: function(){
             $('.upload').after('<span class="loading-bar">Processing...</span>');
            },
          success: function (){
            $('.loading-bar').hide('slow');
            setCrop();
            },
            url: "/account/processpicture"
          }).submit();