How to select Image using jquery and upload it?

Question

I am trying to upload image using jQuery.ajax without a form.

I know how to select values for input boxes

var catSelect=$("#category").val();

But how do i do same for uploading a image (without making a form).

Html:

<div id="tnail"> 
   <input id="profile-image-upload" class="hidden" type="file"> 
   <img id="simg" height="126" width="224" src="'+tmb+'"> 
</div>

jquery:

$('#simg').on('click', function() { 
     $('#profile-image-upload').click();
});

 $('#profile-image-upload').change(function() {
     alert( "Handler for .change() called." );  
 });

Answer 1

You can use http://jsfiddle.net/Quwn6/

  $('#simg').on('click', function() { 
      $('#profile-image-upload').click();
  });

   $('#profile-image-upload').change(function() {
       var formData = new FormData(this.files[0]);
       $.ajax({
          url: '/echo/json/',
          type: 'POST',
          data: formData,
          //Options to tell JQuery not to process data or worry about content-type
          cache: false,
          contentType: false,
          processData: false
      });
  });

Answer 2

I typed jquery file upload site:github.com on Google and found blueimp's "jQuery File Upload" . It has been recently authored (2/26/2014) and has a lot of watchers. Hope that helps!

In the FAQ for the plugin , it says:

Does the plugin require a form or file input field?

If you define the url (and probably paramName) Options, you can call the plugin on any element - no form or file input field required - and the drag&drop functionality will still work.

To support browsers without XHR file upload capabilities, a file input field has to be part of the widget, or defined using the fileInput option.

You can also use site:stackoverflow.com to find relevant questions on here!

Have a good one.