使用jQuery通過ajax從多部分/表單數據發送數據

Question

我一直在這一整天都在努力工作，而我卻無法讓它工作。

我基本上已經使用jQuery庫得到了一個簡單的ajax請求，我想發送通過mutlipart/form-data文件輸入發佈的數據，但是，我嘗試了所有我能想到的。

我的文件上傳腳本在等待文件名作爲參數（嘗試沒有），但它只是不想從文件輸入框本身獲取數據。

有人請賜教我如何做到這一點沒有另一個插件（多上傳等）。

這是我的jQuery代碼，該位：

功能uploadTimesheets（）{

$('#waiting').show(); 

var error = ''; 

var msg = ''; 

//Performs the Ajax Request 
var data = $.ajax({ 
    type  : 'POST', 
    url   : '/ajax/timesheet/uploadNewTimesheets.php', 
    dataType : 'json', 
    contentType : 'multipart/form-data', 
    data  : data, 
    error  : error, 
    msg   : msg, 
    success  : function(data){ 

     if(!data){ 
      $('#notification').removeClass(this).addClass('notification-success').html(data).show().delay(1200).fadeOut(800); 
      getActiveTimesheets(getSelectedPage()); 
     }else{ 
      $('#notification').removeClass().addClass('notification-error').html(data.msg + data.errorList).show(); 
      alert('PHHAIL'); 
     } 

     $('#waiting').hide(); 
     function(xhr, status, errorThrown){ 
      $('#waiting').hide(); 
     } 
    } 
}); 

}

這裏是我的PHP上傳腳本：

/** 
* Creates a directory in the active directory with the given folder name 
* 
* @author RichardC 
* @param string $dirName 
* @return boolean 
*/ 
public function createDir($dirName) { 

    $docRoot = getenv('DOCUMENT_ROOT'); 

    if (!is_dir(sprintf('%s/%s', $docRoot, $dirName))) { 
     $makeDir = mkdir(sprintf('%s/%s', $docRoot, $dirName)); 
     echo sprintf('Creating a folder called \'/%s/\' ...', $dirName); 
     if ($makeDir) { 
      echo '<br />Successfully created the folder.<br />'; 
      return true; 
     } else { 
      echo sprintf('<br /> Sorry, please create the folder manually at: %s/%s', $docRoot, $dirName); 
      return false; 
     } 
    } 
} 

/** 
* Uploads either a CSV or an EXCEL file to a temporary directory 
* 
* @author RichardC 
* @param Resource $file 
* @return Boolean  true/false 
*/ 
public function upload($filename) { 

    $filename = (!isset($filename)) ? $this->file : $filename; 

    //Get the document root 
    $docRoot = getenv('DOCUMENT_ROOT'); 

    $this->createDir('uploads'); 

    if (($_FILES['file']['type'] == 'application/vnd.ms-excel') || ($_FILES['file']['type'] == 'application/csv') || ($_FILES['file']['type'] == 'text/csv') || ($_FILES['file']['type'] == 'text/comma-separated-values') || ($_FILES['file']['type'] == 'application/excel') && 
      ($_FILES["file"]["size"] < 1000000)) { 
     if ($_FILES["file"]["error"] > 0) { 
      echo "Return Code: " . $_FILES["file"]["error"] . "<br />"; 
     } else { 
      if (file_exists($docRoot . "upload/" . $_FILES["file"]["name"])) { 
       echo $_FILES["file"]["name"] . " already exists. "; 
       $this->file = $docRoot . '/upload/' . $_FILES["file"]["name"]; 
      } else { 
       move_uploaded_file($_FILES["file"]["tmp_name"], $docRoot . "/upload/" . $_FILES["file"]["name"]); 
       $this->file = $docRoot . '/upload/' . $_FILES["file"]["name"]; 
      } 
     } 
    } else { 
     echo "Invalid file"; 

     return false; 
    } 

    //Remove the unwanted file now 
    $this->fileContents = file_get_contents($this->file); 
    @unlink($this->file); 
    unset($this->file); 

    return true; 
} 

如果任何人都可以提供幫助，非常感謝！

Answer 1

爲了使您的multipart/FORMDATA工作，你必須在你的Ajax請求添加一些額外的東西：

cache: false, 
contentType: false, 
processData: false, 

您可以輕鬆地這樣做創建自己的數據字段：

var uploadData = $("#uploadFile").prop("files")[0]; 
var newData = new FormData(); 

$.each($('#uploadFile').prop("files"), function(i, file) { 
    newData.append('file-'+i, file); 
}); 

在你的Ajax請求你必須設置此：

data: newData