Свяжите дополнительный ввод для каждого загруженного файла с FormData - PullRequest
Новая
       31

Свяжите дополнительный ввод для каждого загруженного файла с FormData

0 голосов
/ 03 ноября 2018

У меня есть вход мультизагрузки изображений, который отображает предварительные просмотры изображений и позволяет редактировать их перед отправкой, используя FormData, FileReader и AJAX.

Но я не знаю, как связать дополнительные поля ввода для заголовков изображений с каждым загруженным файлом. Я попытался создать эти входные данные в том же коде, который отображает изображения для предварительного просмотра, а затем загрузить их с помощью AJAX с необработанными данными.

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

$("#files").on("change", File_Selection);
$("#create-rankit-imgs").on("submit", Submit_form);
files_selection = $("#files-selection");
var uploaded_files = [];


function File_Selection(e) {

  var files = e.target.files;
  var files_array = Array.prototype.slice.call(files);

  for (let f of files_array ){

    uploaded_files.push(f);
    var reader = new FileReader();

    reader.onprogress = function (e) {
      $(".loader").css("display", "block")
    }

    reader.onloadend = function (e) {
      $(".loader").hide() 
    }

    reader.onload = function (e) {
      /*I TRIED HERE TO INSERT THE TITLE INPUT TOGETHER WITH THE PREVIEW IMAGE*/
      var files_selection_preview = "<div><img id=\"" + "preview-upload-image" + i + "\" src=\"" + e.target.result + "\"> <input id=\"rankit_title\" class=\"form-control img-title\" type=\"text\" name=\"img-title-" + i + "\" > </div>" ;
      files_selection.append(files_selection_preview);
    }    
    reader.readAsDataURL(f);
  } 
}

function Submit_form(e) {
  /*Submit the content in "files_array" to the server via AJAX and formdata"*/
  e.preventDefault();
  var formdata = new FormData();

  for(var i=0, len=files_array.length; i<len; i++) {
    formdata.append('files', storedFiles[i]);
  }

  var img_titles = Array.prototype.map.call(
    document.querySelectorAll('.img-title'),
    element => element.value);

  /*I SEND THE CONTENT OF IMAGE TITLES SUCCESSFULLY, BUT NOT MATCHING WITH FORMDATA, BECAUSE THEY HAVE DIFFERENT ORDER*/
  formdata.append('img_titles', JSON.stringify(img_titles));
  $.ajax({
    url: '{% url 'images:create' %}',
    type: "POST",
    data: formdata,
    // necessary options for file upload:
    processData: false,
    contentType: false,
    cache: false,
    //redirect in case of success
    success: function(data){
      if (data['status']=='ok'){
        window.location.replace("/rankit/" + data['rankit']);
      }}
  });
}
...