Загружать несколько файлов по одному HTTP-запросу

Question

Есть ли способ загрузить несколько файлов в один HTTP-запрос с использованием кордовы. Я нашел все решение, которое использует отдельный HTTP-вызов для каждой загрузки изображения.

Answer 1

Я спросил у Раймонда камден тот же вопрос. Он ответил мне этим замечательным блогом.

Я просто использовал плагин камеры, чтобы вы могли выбрать несколько изображений с устройства. Каждое изображение добавляется в DOM. Вот этот код:

var images = []; 
var $imagesDiv; 

document.addEventListener("deviceready", init, false); 
function init() { 

    $("#addPicture").on("touchend", selPic); 
    $imagesDiv = $("#images"); 
    $("#uploadPictures").on("touchend", uploadPics); 
} 

function selPic() { 
    navigator.camera.getPicture(function(f) { 
     var newHtml = "<img src='"+f+"'>"; 
     $imagesDiv.append(newHtml); 
     images.push(f); 
     if(images.length === 1) { 
      $("#uploadPictures").removeAttr("disabled"); 
     } 
    }, function(e) { 
     alert("Error, check console."); 
     console.dir(e); 
    }, { 
     quality: 50, 
     sourceType: Camera.PictureSourceType.PHOTOLIBRARY, 
     destinationType: Camera.DestinationType.FILE_URI 
    }); 

} 

Как вы можете догадаться, кнопка загрузки внизу начнет процесс. Для моего тестирования я настроил скрипт ColdFusion, чтобы просто сохранить закачки во временный каталог. Для того, чтобы добавить немного randonmness, хотя, это будет случайным образом отклонять изображения, выводя 0. В случае успешного добавления, он будет выводить 1.

Вот остальная часть кода:

function uploadPics() { 
    console.log("Ok, going to upload "+images.length+" images."); 
    var defs = []; 

    images.forEach(function(i) { 
     console.log('processing '+i); 
     var def = $.Deferred(); 

     function win(r) { 
      console.log("thing done"); 
      if($.trim(r.response) === "0") { 
       console.log("this one failed"); 
       def.resolve(0); 
      } else { 
       console.log("this one passed"); 
       def.resolve(1); 
      } 
     } 

     function fail(error) { 
      console.log("upload error source " + error.source); 
      console.log("upload error target " + error.target); 
      def.resolve(0); 
     } 

     var uri = encodeURI("http://localhost/testingzone/test.cfm"); 

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

     var ft = new FileTransfer(); 
     ft.upload(i, uri, win, fail, options); 
     defs.push(def.promise()); 

    }); 

    $.when.apply($, defs).then(function() { 
     console.log("all things done"); 
     console.dir(arguments); 
    }); 

} 

Так, сверху донизу , то, что я делаю, создает массив объектов с обещаниями. Или, более конкретно, их версию jQuery. Затем я запускаю вызов загрузки для каждого изображения, выбранного пользователем. Я проверяю результат с сервера и разрешаю обещание с 0 или 1 в зависимости от того, что сказал сервер.

Наконец, мне позвонили в $ .when обрабатывать ожидания всех этих процессов asynch для завершения. Я на самом деле ничего не показываю, я просто console.dir, но вы могли бы представить, что проверяете результаты и делаете - ну, что имеет смысл.

Надеюсь, это полезно для людей, и, как всегда, дайте мне знать, если у вас есть какие-либо вопросы. Вы можете найти полный исходный код здесь: https://github.com/cfjedimaster/Cordova-Examples/tree/master/multiupload

Ресурс: Raymond Camden's Blog

Answer 2

с моей стороны, я пытаюсь застегнуть все изображения/файлы в один файл, а затем загрузить единственный файл почтового индекса. Вопрос для этого потенциального решения: найти функцию Cordova зип для обоих андроид & КСН