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 seconds get an uploaded image as a result IN THE SAME 开发者_如何学编程PAGE. I tried a few scripts that google found for me, but I didn't seem to get them working.

Anyone able to help with knowledge or something useful online?

Thanks.

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.

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();