使用Javascript将我的服务器上的远程文件上传到第三方服务器

Question

我正在使用PHP在我的服务器上创建一个图像文件。现在我需要通过POST将这个文件上传到第三方服务器。最容易的方法是使用服务器端cURL脚本来完成，但我必须通过我的客户端来做，因为它需要在客户端和第三方服务器之间的活动会话的上下文中上传。问题是如何最容易地实现这一点？

1.是否可以使用HTML表单或AJAX调用，并通过给它URL上传图像？问题在于第三方后端不接受URL，它需要表示为如果是通过Web表单上传的...

2.如果不可能，我想使用AJAX调用下载图像并将内容保存到变量中。然后创建一个表单，上传图像的内容，就好像选择了一个本地文件一样。我该如何实现这一点？

当我通过Web表单上传文件并查看发送的HTTP标头时，我看到类似于这样的内容：

------WebKitFormBoundary3ygta7rqeBm1krBO
Content-Disposition: form-data; name="MAX_FILE_SIZE"

10000000
------WebKitFormBoundary3ygta7rqeBm1krBO
Content-Disposition: form-data; name="uploadedfile"; filename="test.jpg"
Content-Type: image/jpeg


------WebKitFormBoundary3ygta7rqeBm1krBO--

我应该按照这种格式创建一个字符串，并通过AJAX调用将其提交为数据吗？ 我该把实际的二进制图像数据放在哪里？ 我猜Chrome开发人员工具会压制那些数据...

感谢任何提示。

- Joni

Answer 1

我认为最简单的方法就是你所说的，通过你的服务器将其上传到第三方。你是否有办法通过你的PHP脚本获取用户会话中的任何内容？

否则，你可以尝试以某种编码格式（如base64）向客户端发送图像，之后由你的服务器生成，然后构建一个自定义XHR将文件发送到第三方...这里是一个示例：

var boundary = this.generateBoundary();
var xhr = new XMLHttpRequest;

xhr.open("POST", this.form.action, true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        alert(xhr.responseText);
    }
};
var contentType = "multipart/form-data; boundary=" + boundary;
xhr.setRequestHeader("Content-Type", contentType);

for (var header in this.headers) {
    xhr.setRequestHeader(header, headers[header]);
}

// here's our data variable that we talked about earlier
var data = this.buildMessage(this.elements, boundary);

// finally send the request as binary data
xhr.sendAsBinary(data);

在“XMLHttpRequest对象”部分下方查看更多信息：
http://igstan.ro/posts/2009-01-11-ajax-file-upload-with-pure-javascript.html

- janechii