title: html input file click event submit form before select file
body: <p>I am trying to implement upload file , I want to call the file input to select the file first, after selected the file , then will do form submit. However in my code , it will call form submit immediately. I have tried use ajax but not work. Any way I want to do the form submit just after the user have selected the file. But it seems cannot find a way to wait the finishing of the file input click function ( I mean until the user have selected a file)</p>
  
  <p>Here is my html:</p>
  
  <pre><code> &lt;input type="text" id="body" name="body" &gt;
   &lt;button type="submit"  id="sent_1" value="Send"&gt;Submit&lt;/button&gt;         
   &lt;input type="file" id="image_file" name="image" size="chars"&gt;
   &lt;button  id="send_img_btn" value="image"&gt;Image&lt;/button&gt;&lt;/td&gt;
  </code></pre>
  
  <p>Here is my javascript:</p>
  
  <pre><code>    $('#send_img_btn').click(function(e){
            e.preventDefault();
      $('#image_file').click();
      $('#form').submit();
  });
  
  function imageClick(){
         $('#image_file').click();
  }
  
  function submit(){
         $('#form').submit();
  }
  </code></pre>
  
  <p>Edited: Maybe I am not clearly saying my problem. The problem is that when<br>
  I click the button, it just submit the form instantly, not waiting me for selected file. I want it to wait me until I selected the file then submit.  </p>