JQuery AJAX equivalent of form's submit file

Question

I have a form, like this

<form id="picuploadform" enctype="multipart/form-data" method="post" action="">

    <div class="row">
      <label for="fileToUpload">Select a File to Upload</label><br />
      <input type="file" name="fileToUpload" id="fileToUpload" /> 
     <input type="hidden" id = "picssn" name="picssn" value="qweweqwq">
    </div>

    <div class="row" style="width:150px;">
   <input type="submit"  value="Upload" />
    </div>

  </form>

Which when I click the submit button I have PHP on this page to process it just fine. $_FILES for receiving file and $_POST for reading picssn that came with the hidden input. But due to problem with Jquery mobile I can't use submit or .submit() now. So I want to use

$.post('myphpfile.php', {picssn:$('#picssn').value(), file: $('#fileToUpload').xxxxxxxxxxxxxxxxx  });

instead. But I have no idea how to grab the file out of that form and send it this way. Is there some method that can replace xxxxxxxxxxxxxx ? Thanks!

possibly related: http://stackoverflow.com/q/166221/296889 – jeremysawesome Feb 25 '12 at 20:28 — jeremysawesome, Feb 25 '12 at 20:28

score 0 · Answer 1 · answered Feb 25 '12 at 20:17

0

You cant upload directly via ajax. Check this perhaps: http://blueimp.github.com/jQuery-File-Upload/ or uploadify.com

answered Feb 25 '12 at 20:17

Michal

608
1
5
12

score 0 · Accepted Answer · answered Mar 04 '12 at 13:36

On your form element, you need to disable the ajax submit, and then fix your other code. Try this:

<form id="picuploadform" enctype="multipart/form-data" method="post" action="#" data-ajax="false">

    <div class="row">
      <label for="fileToUpload">Select a File to Upload</label><br />
      <input type="file" name="fileToUpload" id="fileToUpload" /> 
     <input type="hidden" id = "picssn" name="picssn" value="qweweqwq">
    </div>

    <div class="row" style="width:150px;">
   <input type="submit"  value="Upload" />
    </div>

  </form>

JQuery AJAX equivalent of form's submit file

2 Answers2