通过 Ajax 将本地存储的图像发送到服务器

Question

为了这个问题的直截了当的答案，我一直在寻找高低。

我在以下目录的电话间隙应用程序中本地加载了一张图片：

/image/test.png

我想将此图像作为使用表单数据的多部分表单的一部分发送到服务器。

var formdata = new FormData();

然后我附加我的 JSON

formdata.append("json", JSON.stringify(request));

然后我想附加图像并尝试使用以下内容

var img = new Image();
img.src = './image/test.png';

formdata.append("file", img.src );

$.ajax(
{
  url : "http://myserver:8080/myservlet",
  type : "POST",
  data : formdata,
  processData : false,
  contentType : false,
  dataType : "json",
  success : function(response)
  {
    console.log("success response:"+JSON.stringify(response));
  },
  error : function(jqXHR,textStatus,errorThrown)
  {
    var msg = "Error Sending File. Status: "+textStatus+" Error:"+errorThrown;
    navigator.notification.alert(msg, null, "Error", "OK");
  }
});

如果课程对我不起作用 - 我做错了什么。

Answer 1

在 phonegap 上，您可以使用 FileTransfer 插件。在发布 PhoneGap 3 时，您必须在 config.xml 中包含该插件

 <gap:plugin name="org.apache.cordova.file" />
 <gap:plugin name="org.apache.cordova.file-transfer" />

然后上传到服务器做这样的事情：

  var imageUploadSuccess = function (data) {
        alert("Cool");
  }
  var imageUploadFail = function (error) {
    alert("fail");
  }

  var params = new Object();
  params.yourHttpParam = "My Param Value";
  var url ="http://myserver.com/photo/upload";

  var options = new FileUploadOptions();
  options.fileName = "/image/test.png";
  options.mimeType = "image/png";
  options.fileKey = "file";
  options.params = params;
  options.chunkedMode = false;
  var ft = new FileTransfer();
  ft.upload("/image/test.png", url, imageUploadSuccess, imageUploadFail, options, true);

Answer 2

您需要使用FileTransfer API，注意在撰写本文时它存在一些问题（however they are being addressed.）。

有关详细信息，请参阅此处的文档。 http://docs.phonegap.com/en/3.2.0/cordova_file_file.md.html#FileTransfer

这是一个简单的例子：

var fileURI = // imageURI returned by the CameraAPI.

var success = function (r) {
    console.log("Code = " + r.responseCode);
    console.log("Response = " + r.response);
    console.log("Sent = " + r.bytesSent);
}

var fail = function (error) {
    alert("An error has occurred: Code = " + error.code);
    console.log("upload error source " + error.source);
    console.log("upload error target " + error.target);
}

var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = fileURI.substr(fileURI.lastIndexOf('/') + 1);
options.mimeType = "text/plain";

// The following options are to attempt circumvention of the
// FileTransfer.upload issues in the linked Cordova thread.
// Note that they are reportedly, not always effective.
options.headers={Connection: "close"};
options.chunkedMode = false;

var params = {};
params.value1 = "test";
params.value2 = "param";

options.params = params;

var ft = new FileTransfer();
ft.upload(fileURI, encodeURI("http://some.server.com/upload.php"), success, fail, options);

您需要在 Android Manifest 中启用文件和文件传输插件。

<gap:plugin name="org.apache.cordova.file" />
<gap:plugin name="org.apache.cordova.file-transfer" />

关于已知问题的快速说明...上传将在所有其他后续上传失败（即成功、失败、成功、失败等...） - 请注意，此问题有受影响的iOS和Android（我不能代表BB或其他平台。）AFAIK，Android仍然受到影响，但我建议你read the thread并密切关注它。

有推荐的解决方案/解决方法，但也有报告称它们失败（即关闭分块模式并尝试强制关闭连接。）

在有可靠的修复之前，最好只保留一个尝试连接计数器，并处理偶数失败作为立即重试的原因。 （讨厌，但必要。）

Answer 3

您正在尝试上传图像（=文件），但实际上您正在发布由img.src 返回的字符串。如果您想发布您的图片，您需要将其转换为可以发布的字符串。您可以通过将图像加载到画布元素中并拨打电话toDataUrl 来做到这一点。但是，当使用 phonegap 时，我建议通过文件传输上传文件并将您的其他帖子数据添加到其中...

function uploadPhoto(imageUrlToUpload) {
    //alert('upload: '+imageUriToUpload);
    var url=encodeURI(youruploadurl);
    var params = new Object();
    params.your_param_name = "something";  //add your additional post parameters here
    var options = new FileUploadOptions();
    options.headers={Connection: "close"};
    options.fileKey = "file"; //depends on the api
    options.fileName = imageUriToUpload.substr(imageUriToUpload.lastIndexOf('/')+1);
    options.mimeType = "image/jpeg";
    options.chunkedMode = false; //this is important to send both data and files
    options.params = params;

    var ft = new FileTransfer();
    //what to do during the file transfer? lets show some percentage...
    var status=$('yourselectorhere');//element in the dom that gets updated during the onprogress
    ft.onprogress = function(progressEvent) {
        var perc;

        if (progressEvent.lengthComputable) {


                perc = Math.ceil(progressEvent.loaded / progressEvent.total * 100);

                status.html(perc+'%'+ '('+progressEvent.total+')');

        }else{alert('not computable');}
    };

    ft.upload(imageUrlToUpload, url, success, fail, options);
}

function success(r) {
    alert("Upload success: Code = " + r.responseCode);
}

function fail(error) {
    alert("An error has occurred: Code = " + error.code);
}

Answer 4

您可以使用plugin 获取本地图像的 base64 编码，然后使用 ajax 将其发送到服务器：

window.plugins.Base64.encodeFile(filePath, function(base64){
        console.log('file base64 encoding: ' + base64);
        //write down ajax code to send base64 string
    });