XHR.send(文件+参数)?

Cha*_*III 7 javascript ajax html5 xmlhttprequest

我试图找出如何在同一XMLHttpRequest中发送文件和参数.这可能吗?

显然我可以做xhr.send(file + params)或xhr.(file,params).而且我认为我不能设置两个不同的请求标头来执行此操作...

xhr.setRequestHead('X_FILENAME', file.name)
xhr.send(file);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(params);
Run Code Online (Sandbox Code Playgroud)

有没有办法发送params而不必使用GET或次要xhr请求?

Nol*_*esh 11

如果您依赖支持的浏览器FormData,您可以使用下面的代码(JavaScript):

var formData = new FormData();
formData.append('param1', 'myParam');
formData.append('param2', 12345); 
formData.append('uploadDir', 'public-data');  
formData.append('myfile', file);

xhr.send(formData);
Run Code Online (Sandbox Code Playgroud)

然后,在服务器端,您可以使用此代码(PHP)访问您的变量:

<?
  $param1 = $_POST['param1']; //myParam
  $param2 = $_POST['param2']; //12345
  $uploaddir = $_POST['uploadDir']; //public-data
  $fileName = $_FILES['myfile']['name'];
  $fileZise = $_FILES['myfile']['size'];
  $uploaddir = getcwd().DIRECTORY_SEPARATOR.$uploaddir.DIRECTORY_SEPARATOR;
  $uploadfile = $uploaddir.basename($fileName);       
  move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile);
  echo $fileName.' ['.$fileZise.'] was uploaded successfully!';
?>
Run Code Online (Sandbox Code Playgroud)

要获取所有参数$_FILES['myfile'],请使用var_dump($_FILES["myfile"])


T.J*_*der 6

有没有办法发送params而不必使用GET或次要xhr请求?

是的,你可以将它们编码到URL中(就像GET),即使你正在做POST.例如:

xhr.open(yourUrl + "?foo=" + encodeURIComponent(foo) + "&bar=" + encodeURIComponent(bar));
// ...
xhr.send(file);
Run Code Online (Sandbox Code Playgroud)

我在上面假设你必须知道通过XHR发送一个我不知道的文件.:-)


假设这file是文件的实际内容,通过File API读取,那么它不仅仅是另一个参数吗?所以:

xhr.send(
    "filedata=" + encodeURIComponent(file) +
    "&foo=" + encodeURIComponent(foo) +
    "&bar=" + encodeURIComponent(bar)
);
Run Code Online (Sandbox Code Playgroud)