使用jQuery通过ajax从multipart / form-data发送数据

我现在一整天都在努力，而我却无法让它发挥作用。

我基本上使用jQuery库得到了一个简单的ajax请求，我想发送我通过mutlipart / form-data文件输入发布的数据，但是，我已经尝试了我能想到的一切。

我的文件上传脚本正在等待文件名作为参数（也没有尝试），但它只是不想从文件输入框本身获取数据。

如果没有其他插件（多次上传等），有人可以请教我如何做到这一点。

这是我的jQuery代码：

function 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 '
Successfully created the folder.
'; return true; } else { echo sprintf('
 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"]  0) { echo "Return Code: " . $_FILES["file"]["error"] . "
"; } 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