Question

我遇到XHR2问题，要将文件发布到服务器。我有以下问题：

我想对URL执行POST，其中包含两个参数和FILE。我希望POST请求像我在后端使用input =文件一样。

目标是这样的：

function sendForm(FILE_URI, GO_TO) {
  var formData = new FormData();

  formData.append('param1', "param1");
  formData.append('param2', "Param2");

  // Now we add the file
  formData.append("file", FILE_URI);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', GO_TO, true);
  xhr.onload = function(e) { ... };

  xhr.send(formData);

  return false; // Prevent page from submitting.
}

此代码不起作用，服务器不会将“file”参数视为$ _FILE（我正在使用PHP）。请记住 - 表单中没有“文件上传”元素，它只是一个带有URI的隐藏输入：

<input type="hidden" id="file_item" value="/path/to/image" />

对此有何指导？

更新

据我所知，编辑INPUT文件很糟糕 - 我不想这样做。我想找到其他方法将文件POST到服务器而不使用FORM。我可以使用XHR2上传没有表单的BLOB - 但是我正在寻找使用XHR2来使用Params + File（或Blob）的方法。

Answer 1

想一想。你去一些随机页面，一个人可以在页面上放置一个隐藏的字段，并从你的计算机上传任何文件。这是一个很好的设计吗？这就是您无法设置文件输入值的原因。这是不受限制的。这是一场安全噩梦。

如果它是互联网上某个文件的路径，为什么网络服务器不会获取它？

现在可以使用画布和proxy on your serve使用uploading files that way r来绕过它。

Answer 2

您的表单需要属性enctype，其值为multipart / form-data

<form enctype="multipart/form-data">...</form>

你也应该使用文件元素，并通过css隐藏它（隐藏字段不起作用）。

<input type="file" id="file_item" value="/path/to/image" style="visibility: hidden;">

你可能正在这样做，因为你不能设置文件元素的样式？看到这会打开文件对话框（通过触发文件元素单击）

HTML：

<input type="file" id="file_item" value="/path/to/image" style="visibility: hidden;">
<button id="my-btn">click me for opening file dialog</button>

JS：

document.getElementById('my-btn').onclick = function () {
  document.getElementById('file_item').click();
};

在这里工作小提琴：http://jsfiddle.net/LM6zQ/

没有文件上载表单元素的XHR2文件上传

2 个答案: