0

我在使用 XHR2 将文件发布到服务器时遇到问题。我有以下问题：

我想使用两个参数和 FILE 对 URL 执行 POST。我希望 POST 请求的行为就像我在后端使用 input=file 一样。

目标是这样的：

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（我使用的是 PHP）。请记住 - 表单中没有文件上传元素，它只是一个带有 URI 的隐藏输入：

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

对此有何指导？

更新

我知道编辑 INPUT 文件很糟糕——我不想那样做。我想找到其他方法在没有 FORM 的情况下将文件发布到服务器。我可以使用 XHR2 上传没有表单的 BLOB - 但我正在寻找使用 XHR2 让 Params + File（或 Blob）的方法。

4

2 回答 2

1

想想这个。您转到某个随机页面，有人可以在页面上放置一个隐藏字段并从您的计算机上传任何文件。这是一个好的设计吗？这就是为什么您不能设置文件输入的值的原因。这是禁区。这是一场安全噩梦。

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

现在可以使用画布在您的 server r上使用代理并以这种方式上传文件来绕过它。

于 2013-01-28T20:36:21.943 回答
-1

您的表单需要具有值 multipart/form-data 的属性 enctype

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

您还应该使用 file 元素，并通过 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/

于 2013-01-28T20:37:59.197 回答