Question

我有以下问题：

我有一个显示2张图片的网页，当用户选择其中一张图片时，javascript函数必须拍下这张照片并将其发送到另一台服务器（标准的多部分帖子）

我只有图片的网址，所以首先我通过javascript下载，然后我尝试将其发送到服务器，按照我的代码

function sendImgFromUrl(url){
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = function(e) {
        if (this.status == 200) {
            var reader = new FileReader();
            reader.onloadend = function(){
                var file = event.target.result;

                var resReq = new FormData();
                resReq.append("service_name",service_name);
                resReq.append("file",file); 

                $.ajax({
                    url: "myurl", 
                    data: resReq,
                    type: 'POST',
                    processData: false, 
                    contentType: false, 
                    async: false,
                    complete : function(response){
                         console.log(response);
                    }

                 }); 
            }
            reader.readAsBinaryString(this.response);

        }
    };
    xhr.send();
}

我获得的是使用Object而不是（image）File

的调用

-----------------------------201521280032720 
Content-Disposition: form-data;      
name="file" [object FileReader] 
-----------------------------201521280032720

Answer 1

将这些作为ajax请求选项：

cache: false,
contentType: false,
mimeType: 'multipart/form-data',
processData: false,
method: 'POST'

contentType，mimeType和processData -options非常重要。

processData：false告诉jQuery不要将数据搞砸并按原样发送，而contentType：false则让jQuery自动输入正确的内容类型。 mimeType也可能很重要，因为您正在发送表单数据，因为图像是多部分的。

Answer 2

YEA！我找到了解决方案

我使用reader.result并将其推入blob对象

function sendImgFromUrl(url){
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = function(e) {
        if (this.status == 200) {
            var reader = new FileReader();

            reader.onloadend = function(){
                file = new Blob([reader.result], { type: "image/png" });

                var resReq = new FormData();
                resReq.append("service_name",service_name);
                resReq.append("file",file); 

                $.ajax({
                    url: "myurl", 
                    data: resReq,
                    type: 'POST',
                    processData: false, 
                    contentType: false, 
                    async: false,
                    complete : function(response){
                         console.log(response);
                    }

                 }); 
            }
            reader.readAsArrayBuffer(this.response);

        }
    };
    xhr.send();
}

通过javascript从url上传文件

2 个答案: