Question

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.

Answer 1

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