通過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

您可以使用此插件獲取本地圖像的base64編碼，然后使用ajax將其發送到服務器：

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

Answer 2

在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 3

您需要使用FileTransfer API，請注意，在編寫本文時，它存在一些問題（ 但是正在解決。 ）。

有關詳細信息，請參見此處的文檔。 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仍然會受到影響，但是我建議您閱讀該線程並留意該線程 。

有推薦的解決方案/解決方法，但是也報告它們失敗（即，關閉分塊模式並嘗試強制關閉連接。）

在找到可靠的修復方法之前，最好僅保留嘗試連接的計數器，並處理偶數編號的失敗作為立即重試的原因。 （討厭，但有必要。）

Answer 4

您正在嘗試上傳圖像（=文件），但實際上您正在發布img.src返回的字符串。 如果您想發布圖片，則需要將其轉換為可以發布的字符串。 您可以通過將圖像加載到canvas元素中並獲得對DataUrl的調用來執行此操作 。 但是，當使用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);
}