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

Question

I am using PhoneGap, and uploading a file (using a HTTP POST) like this,

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
}

I am wanting to upload muliple files, so in the success callback I want to call the uploadSingleFile to move onto the next file.

How can I store which file I am up to? I am using the localStorage to store the file names. So I would want to do this,

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

So all I would need to do would be to store the number on the end, 0, 1, etc of where we are up to. Do I need to use a global variable? Seems messy.

If only I could pass through to the success callback a number as a additional parameter?

Answer 1

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]);
  }
}

You can send the index of file as parameter to uploadSingleFile() then using it in console.log()

Answer 2

Hmmm. Is the problem worth doubting? Just store an array of file names and use JSON.stringify / JSON.parse for conversion between array and string.

Answer 3

First add all your images to 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);
}