Jquery Загрузка файла: как установить несколько файлов для загрузки файлов?

Question

Я использую плагин загрузки файлов JQuery с Django в качестве бэкэнд. Все работало хорошо, пока я не попытался интегрировать Multiple File Upload Widgets on the same page.

Первая проблема

Во-первых, я не уверен, что я должен изменить несмотр в док. Here is the original main.js file указан на странице. Я не эксперт jQuery, и я не могу понять, что именно мне нужно изменить.

Я был бы очень рад увидеть пример этого main.js, переписанного, как и должно быть.

Вторая проблема

Весь смысл иметь несколько виджетов на одной странице для меня, чтобы отобразить различные элементы. Вот почему в моем бэкэнде upload/view/ url стал upload/view/(?P<pk>\d+)/.

Например, если на одной странице я хочу дисплеи две фотографий альбомов, содержащих много фотографий, я ожидаю, что моя страница называть upload/view/1 и upload/view/2

Бэкэнда часть работает хорошо, так вызывая там URLs вернуть правильный JSon ответ.

Но для части ajax, я не знаю, что делать. В файле main.js, я могу видеть, где он должен быть изменен, но не знаю, как это сделать:

  $.ajax({ 
      // Uncomment the following to send cross-domain cookies: 
      //xhrFields: {withCredentials: true}, 
      //url: $('#fileupload').fileupload('option', 'url'), 
      url: '/upload/view/', 
      dataType: 'json', 
      context: $('#fileupload')[0] 

Любая помощь будет оценена. Благодарю.

Answer 1

Вы должны комментировать или удалять эти части кода:

// Initialize the jQuery File Upload widget: 
$('#fileupload').fileupload({ 
    // Uncomment the following to send cross-domain cookies: 
    //xhrFields: {withCredentials: true}, 
    //url: 'server/php/' 
}); 

// Enable iframe cross-domain access via redirect option: 
$('#fileupload').fileupload(
    'option', 
    'redirect', 
    window.location.href.replace(
     /\/[^\/]*$/, 
     '/cors/result.html?%s' 
    ) 
); 

И положил эти строки, которые позволяют установить несколько виджетов закачивать на основе fileupload класса:

$('.fileupload').each(function() { 
    $(this).fileupload({ 
    dropZone: $(this) 
    }); 
}); 

Answer 2

Ok ,

на основе ответа @Hackerman и другого головного мозга, вот окончательный рабочий файл main.js:

$(function() { 
    'use strict'; 

    // cpt will count (0-based) number of fileupload forms in the page 
    var cpt = 0; 

    $('.fileupload').each(function() { 

     $(this).fileupload({ 
      dropZone: $(this) 
     }); 

     // Load existing files: 
     $(this).addClass('fileupload-processing'); 
     $.ajax({ 
      url: '/upload/view/' + $(this).children("input[name='folder_element']").val(), 
      dataType: 'json', 
      context: $('.fileupload')[cpt] // select the right form 
     }).always(function() { 
      $(this).removeClass('fileupload-processing'); 
     }).done(function (result) { 
      $(this).fileupload('option', 'done') 
       .call(this, null, {result: result}); 
     }); 

     cpt += 1; 

    }); 

}); 

и HTML, соответствующий 2 форм:

<form class="fileupload" method="post" action="." enctype="multipart/form-data"> 
    <input type="hidden" name="folder_element" value="1"> 
    ... 
</form> 

<form class="fileupload" method="post" action="." enctype="multipart/form-data"> 
    <input type="hidden" name="folder_element" value="2"> 
    ... 
</form> 

Я не эксперт JQuery, но мне кажется, что вам нужно иметь переменный счетчик, чтобы пройти хороший контекст в Ajax запроса.

Answer 3

Попробуйте (v9.11.1):

Форма (ы):

<form data-id="1" ..... 
<form data-id="2" ..... 

Сделайте копии сервера (PHP папку в этом примере) и назовите их php1 и php2. Затем файл main.js становится (сохраняя более или менее верный исходный код):

$(function() { 
    'use strict'; 

    // Initialize the jQuery File Upload widget: 
    $('.fileupload').each(function() { 

     $(this).fileupload({ 
      dropZone: $(this) 
     }); 

     $(this).fileupload({ 
      // Uncomment the following to send cross-domain cookies: 
      //xhrFields: {withCredentials: true}, 
      url: 'server/php'+$(this).attr('data-id')+'/' 
     }); 

     // Load existing files: 
     $(this).addClass('fileupload-processing'); 
     $.ajax({ 
      // Uncomment the following to send cross-domain cookies: 
      //xhrFields: {withCredentials: true}, 
      url: $(this).fileupload('option', 'url'), 
      dataType: 'json', 
      context: $(this)[0] 
     }).always(function() { 
      $(this).removeClass('fileupload-processing'); 
     }).done(function (result) { 
      $(this).fileupload('option', 'done') 
       .call(this, $.Event('done'), {result: result}); 
     }); 

    }); 

    // Enable iframe cross-domain access via redirect option: 
    $('.fileupload').fileupload(
     'option', 
     'redirect', 
     window.location.href.replace(
      /\/[^\/]*$/, 
      '/cors/result.html?%s' 
     ) 
    ); 

});