如何使用 Javascript 将多个文件上传到服务器

Question

我正在使用 PhoneGap，并像这样上传文件（使用 HTTP POST），

function uploadSingleFile()
{
    var ft = new FileTransfer();
    // set up parameters etc
    ft.upload(imageName, "http://serviceaddress/UploadFile.ashx", win, fail, options);
}

function win(r)
{
    // success callback
}

我想要上传多个文件，因此在成功回调中我想调用 uploadSingleFile 来移动到下一个文件。

如何存储我正在处理的文件？我正在使用 localStorage 来存储文件名。所以我想要这样做，

upload file localStorage.file0
upload file localStorage.file1
upload file localStorage.file2

所以我需要做的就是将数字存储在我们要达到的位置的末尾，0、1 等。我需要使用全局变量吗？看起来很乱。

如果我可以将数字作为附加参数传递给成功回调就好了？

Answer 1

嗯。这个问题值得怀疑吗？只需存储一个文件名数组，并使用 JSON.stringify / JSON.parse 进行数组和字符串之间的转换。

Answer 2

function uploadSingleFile(fileName) {

  var ft = new FileTransfer();

  ft.upload("fileUrl",
            "server",
            function (result , fileName) {
              console.log(fileName + ' has been uploaded successfully to server');                                          
            },
            function (error) {
              console.log(error);
            },
            {fileName: fileName, fileKey: "file"});
}

function uploadFiles() {
  var files = JSON.parse(localStorage.files);

  for(var i=0; i < files.length; i++) {
    uploadSingleFile(files[i]);
  }
}

您可以将文件索引作为参数发送给 uploadSingleFile()，然后在 console.log() 中使用它

Answer 3

首先将所有图像添加到 array 中：

var TemplstImg = [];

function UploadImages()
{

    var lstImages = [localStorage.file0,localStorage.file1,localStorage.file2];
    TemplstImg=lstImages  ;

    if (TemplstImg.length > 0) {
        var img = TemplstImg.pop();
        uploadPhoto(img);
    }
}

function uploadPhoto(imageURI) {

    imageURI = imageURI.ImageFile;

    var options = new FileUploadOptions();
    options.fileKey = "file";
    options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
    options.mimeType = "image/jpeg";

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

    options.params = params;

    var ft = new FileTransfer();

    ft.upload(imageURI, yourServerPath, winImg, failImg,options);
}

function winImg(r) {

    if (TemplstImg.length == 0) {
        alert ('Done , all files was uploaded'); 

    } else {
        var img = TemplstImg.pop();
        uploadPhoto(img);
    }
}

function failImg(error) {

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