title: How to upload image through jQuery/Ajax in wordpress
body: <p>I am trying to upload image from wordpress register form(custom form). I found many ways to upload via ajax but none of them working for me.</p>
  
  <p>here is form without  tag</p>
  
  <pre><code>&lt;div class="lofin-form"&gt;&lt;div class="row"&gt;                       
  &lt;input type="text" name="first_name" id="first_name" placeholder="First Name" class="input" value="" size="20" /&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt; 
  &lt;lable&gt;Id proof &lt;input type="file" name="id_proof"  id="id_proof" class="input" /&gt;
  &lt;/div&gt;
  &lt;p class="submit"&gt;&lt;input type="submit" name="wp-submit" id="wp-submit-register" class="btn vernil small" value="'.__('Sign Up','wpestate').'" /&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here is the jQuery script code</p>
  
  <pre><code>$('#wp-submit-register').click(function(){
    wpestate_register();
  });
  
  function wpestate_register (){
  var  user_role =  $('#first_name').val();
  var fdata = new FormData();
  fdata.append('file', $('#id_proof')[0].files[0]);
  $.ajax({
      type: 'POST', 
      url: ajaxurl,
      data: {
          'action' :   'ajax_free_register_form',
          'first_name'  :   first_name,
          'file_data'   : fdata
  
      },
      success:function(data) {
          alert('success');
      }
  }
  </code></pre>
  
  <p>And here is php function</p>
  
  <pre><code>add_action( 'wp_ajax_nopriv_ajax_free_register_form', 'ajax_free_register_form' );  
  add_action( 'wp_ajax_ajax_free_register_form', 'ajax_free_register_form' );  
  
  function ajax_free_register_form(){
     $first_name  =   trim( $_POST['first_name'] ) ;
     $id_proof   =   $_FILES['id_proof'] ; 
  }
  </code></pre>
  
  <p><strong>RESOLVE [EDIT]</strong></p>
  
  <p>Just add form tag in form and gave an ID 'user_reg_form'. </p>
  
  <pre><code>&lt;form id="user_reg_form" action="" method="post" enctype="multipart/form-data"&gt;
  ----------------------input fields goes here-------------------
  &lt;/form&gt;
  </code></pre>
  
  <p>And update the script:</p>
  
  <pre><code>$('#wp-submit-register').click(function(){
     wpestate_register();
  });
  
  function wpestate_register (){
  var formdata = new FormData( $("#user_reg_form")[0] );
  formdata.append('action', 'ajax_free_register_form');
  $.ajax({
     type: 'POST', 
     cache: false,
     contentType: false,
     processData: false,
     url: ajaxurl,
     data: formdata,
     success:function(data) {
        alert('success');
     }
  });
  }
  </code></pre>
  
  <p>After that you can simply get the uploaded file with</p>
  
  <pre><code>$attachment = $_FILES['id_proof'];
  </code></pre>