Мне нужно загрузить несколько изображений через ajax

Question

Я немного начинаю, и я пытаюсь создать функцию, которая позволяет пользователям делать слайд-шоу из фотографий. Они загружать изображения и предварительного просмотра с помощью этого кода:

function photoPreview (input) { 

    if (input.files && input.files[0]) { 

     var reader = new FileReader(); 
     reader.onload = function (e) { 
      $('.preview-photo').attr('src', e.target.result); 

     } 
     reader.readAsDataURL(input.files[0]); 
    } 
} 

$('.photo-upload').change(function(){ 
    photoPreview(this); 
}) 

, а затем нажмите кнопку «Добавить», чтобы добавить фотографию в очереди изображений, которая ниже предварительного просмотра дел. Очередь изображения показывает снимок фотографии с помощью этого кода:

var uploadSource = $('.preview-photo').attr('src'); 
$('#queue-container').append("<img class='snapshot-photo'" + "src='" + uploadSource + "'>"); 

Наконец, я пытаюсь отправить все фотографии с помощью AJAX.

for (i = 0; i < $('#queue-container').children('.snapshot-photo').length; i++) { 
    var sourcevalue = $('#snapshot-container').children('.snapshot-photo:eq(' + i + ')').attr('src') 
    var source = document.createElement('input'); 
    $(source).attr({ 
     type: 'file', 
     name: 'photo_source_' + i, 
     value: sourcevalue 
    }); 
} 

Когда я получаю на мою сторону сервера и попытаться увидеть, если он прошел через файловую систему, она выходит как неопределенная

fs.readFileSync(req.files.photo_source_0) // cannot read property of undefined 

Я знаю, что это длинный вопрос, но я действительно нужна помощь. Как я могу заставить файловую систему узла распознавать файлы? Или мой весь процесс неправильный? Все предложения приветствуются.

Answer 1

Вы можете использовать от Uploadfiy, у него есть очень полные варианты для вас и есть две версии, флэш-версия (бесплатная) и версия HTML5, которые вы можете купить эту версию.