How to read the $_FILES['name']['tmp_name'] using jQuery

Question

I'm making an application to import excel to database using excel_reader2.php. I created a form for uploading excel file and when the file that I want to upload selected, I want to read data boundsheet of the excel file. which become problems when I using js, I could not parsing the $ _FILES in php code.

<script type="text/javascript">
function sheetChange()
{
    var html;
    $("#sheetName td").remove();
    var fileInputContent = $('#form').serializeArray();
    $.post(basedomain+"mycontroller/readSheet",fileInputContent,function(result)
    {
       if(result)
       {
          $("#sheetName").show();
          var data = JSON.parse(result);
          html += '<td>Sheet Name</td><td colspan=\'3\'><select name=\'SHEET\' required>';
          for(var i in data)
          {
             html += '<option value=\''+data[i]+'\'>'+data[i]+'</option>';
          }
          html +='</select></td>';
          $("#sheetName").append(html);
       }
     });
  }
</script>
<form id = 'form' method="post" action="upload.php" enctype="multipart/form-data">
    <table cellspacing="0" cellpadding="0">
       <tr>
           <td>Input Xls File</td>
           <td colspan="3"><input type="file" name="file" id="file" onchange="sheetChange()"/></td>
       </tr>
      <tr id="sheetName"></tr>
    </table>
</form>

php code:

public function readSheet()
{
    error_reporting(E_ALL ^ E_NOTICE);
    require_once 'excel_reader2.php';
    $data = new Spreadsheet_Excel_Reader($_FILES['file']['tmp_name']); //$_FILES is null

    foreach ($data->boundsheets as $k=>$sheet)
    {
        $row[] = $sheet['name'];
    }
    echo json_encode($row);
    exit;
}

anyone can help me?Thanks in advance.

Answer 1

the reason is that uploading files using HTML is not as simple as you might think. Here are two nice examples how a normal POST looks like (in the HTTP Protocol) versus how a multipart/form-data request looks like:

http://www.htmlcodetutorial.com/forms/form_enctype.html

The thing to take away from here is, that form submits and form submits with file upload are technically two very different things.

$.post can only do the normal form submit for you, file uploads are not supported by jQuery.

There are two ways you can get around this:

• just do a plain form submit (the simpler approach)
• you'll have to programmatically add the file to the request. If you go for this option, there's a plugin you might use (never tried it though): https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-form-data

Cheers, Matthias