Сайт Wordpress - как сохранить event.target.файлы в jQuery при перемещении между несколькими ajax-вызовами PHP-скриптов?

ProgramBox

Сайт WordPress — как сохранить event.target.файлы в jQuery при перемещении между несколькими ajax-вызовами PHP-скриптов?

Post author:admin
Запись опубликована:27 марта, 2023
Post category:Вопросы по программированию

#php #jquery #ajax #wordpress

Вопрос:

Я занимаюсь примерно 2 месяцами PHP и JQuery , поэтому, пожалуйста, потерпите меня. 🙂

У меня есть форма с кнопкой для добавления новой записи. При нажатии кнопки открывается модальное окно для записи, включая кнопку для загрузки файла, которая при нажатии запускает ajax-вызов PHP-скрипта для загрузки файла. При отправке модального я использую ajax для вызова PHP-скрипта для сохранения файла на сервере и записи в базу данных с URL-адресом файла, сохраненного на сервере.

Проблема, с которой я сталкиваюсь, заключается в том, что, поскольку это новая запись, идентификатор записи неизвестен во время вызова PHP-скрипта для загрузки файла на сервер. У меня есть другие варианты использования для обработки загрузки файлов в edit record, которые работают должным образом, потому что идентификатор записи известен. Итак, я хотел бы избежать необходимости переупорядочивать существующий код.

После тонны исследований и пробования всевозможных рекомендаций за последние 2 недели я все еще не могу заставить эту функциональность работать.

Сейчас я нахожусь в том, что вызов ajax вызывается дважды для новых записей. При 1-м вызове, поскольку идентификатор пуст, он просто завершает работу функции. При 2-м вызове, когда идентификатор известен, происходит сбой, потому что теперь event.target.файлы не определены.

Одно из решений, которое, я полагаю, будет работать с существующим кодом, — это возможность сохранить event.target.файлы в глобальной переменной (что, как я думал, я делал), чтобы она по-прежнему была доступна для 2-го вызова ajax. Но ничего из того, что я пробовал, не сработало.

Вопрос — как я могу сохранить event.target.файлы в глобальной переменной должны быть доступны для 2-го ajax-вызова? Или есть лучшее решение, которое не нарушит уже работающий код для редактирования записей? Я просто неправильно передаю событие?

Любая помощь приветствуется!

Вот соответствующий JS-код

 jQuery(document).ready(function($) {
  var files;
  $('#file_input').on('change', function() { // 1st call after clicking 'upload file' in modal
    var files = document.getElementById('file_input').files[0];
    prepareUpload(e);
  });

  $(document.body).on("click", "#submit-btn-modal", function(e) {
    e.preventDefault();
    post_record(e);
  });

});
        
function prepareUpload(e, count, new_recid) {
  if (count === 2) {
    var id = new_recid;
  } else {
      var prefix = $("#master_form_wrapper #prefix").val();
      var recid = $("#master_form_wrapper #" prefix "id").val();
      var id = parseInt(recid);
    }
  files = e.target.files; // errors here on 2nd call (Cannot read property 'name' of undefined)
  var data = new FormData();
  data.append("action", "file_upload");
  data.append("id", id);
  $.each(files, function(key, value) {
    data.append("file_upload", value);
    });        
  $.ajax({
    url: general_globals.ajaxurl,
    type: 'POST',
    data: data,
    cache: false,
    dataType: 'json',
    processData: false, 
    contentType: false
  });
  } 
}

function post_record(e) {
  var counter = 1;
  var post = $("#master_form_wrapper form").serialize();
  var id = $("#master_form_wrapper #" prefix "id").val();
  var action = 'update_record';
  $.ajax({
    url: general_globals.ajaxurl,
    data: { action : action, post : post},
    type: "post",
    success: function(response){
    if (response.search("ERROR: ") === -1) {
      record = JSON.parse(response);
      var recordID = record.record_id;
      var recid = recordID.split('_').pop();
      var counter = 2;
      prepareUpload(e, counter, recid); // 2nd call after clicking 'submit' in modal
    }
  });
}

Вот соответствующий HTML

 <body>
  <div id='modal_cover'>
    <div id='master_form_wrapper'>
      <span class='close'><button class='close-modal'> </button></span>
      <form name='$table' id='$table' method='post' action='' class='upload_form' enctype='multipart/form-data'>
        <input type='hidden' name='prefix' id='prefix' value='$prefix'>
        <div class='field_wrapper'>
          <div id='file_upload' class='file-upload'>
            <input type='file' id='file_input' style='opacity:0;' />
            <p class='file_upload_text'>Click to upload file</p>
          </div>
          <div id='file_upload_preview' class='file-upload file-preview' style='display:none;'>
            <div class='file_preview'></div>
              <button id='fileurl' data-fileurl='' class='file_delete'>Delete</button>
          </div>
          <button id='submit-btn-modal' class='submit-btn-modal'>Submit</button>
        </div>
      </form>
    </div>
  </div>
</body>

1. Можете ли вы также добавить соответствующий HTML-код.

2. prepareUpload(e); вы передаете здесь только один аргумент, но функция ожидает три аргумента при выборе файла.

3. @AlwaysHelping, готово! Я подтвердил, что передача параметров не является проблемой, поскольку консоль prepareUpload правильно регистрирует идентификатор при втором вызове. Дайте мне знать, если вам нужно что-нибудь еще.

4. Мой ответ решил ваш вопрос?

5. Да, это так! Мне пришлось внести изменения в одну строку существующего кода. Тогда это сработало как по волшебству. Я действительно ценю ваши усилия!

Ответ №1:

Вам нужно, чтобы store вы file , которую вы выбираете onChnage , выполняли функцию в массиве. У меня есть имя, которое filesToUpload . Как только вы выберете, file это будет pushed в это array .

Когда вы нажмете на submit-btn-modal кнопку, вы передадите это array через post_record(filesToUpload) , и в этом function вы получите это argument .

Как только post_record есть successfully , и вы получили id (recid) с сервера. Затем вы можете вызвать prepareUpload(myFiles) передачу этого массива в вашу функцию загрузки вместе с id и counter

В функции подготовки загрузки мы просто loop пройдем this через массив и добавим фактическое значение к formData объекту.

Я также добавил примечания к каждой строке кода для вас.

Замените свой код следующим: (Код протестирован и работает)

 jQuery(document).ready(function($) {

  //array to store file
  var filesToUpload = []

  //Store File on select
  $('#file_input').on('change', function(e) { // 1st call after clicking 'upload file' in modal
    //get the file
    var files = e.target.files[0]
    //Push your file to an array
    filesToUpload.push(files);

  });

  //Upload button
  $(document.body).on("click", "#submit-btn-modal", function(e) {
    e.preventDefault();
    //send you array to upload in prepare upload
    post_record(filesToUpload);
  });
});

function prepareUpload(file, count, new_recid) {
  if (count === 2) {
    var id = new_recid;
  } else {
    //var prefix = $("#master_form_wrapper #prefix").val();
    // var recid = $("#master_form_wrapper #" prefix "id").val();
    //var id = parseInt(recid);
  }

  //Initialize formData
  var data = new FormData();
  data.append("action", "file_upload");
  data.append("id", id);

  //prepare each file
  for (var i = 0; i < file.length; i  ) {
    data.append("file_upload", file[i]); //actual file
  }

  //Final ajax call
  $.ajax({
    url: general_globals.ajaxurl
    type: 'POST',
    data: data,
    cache: false,
    dataType: 'json',
    processData: false,
    contentType: false
  });

  //Set the array to empty again once the record is created and file uploaded
  filesToUpload = []
}

function post_record(myFiles) {

  //counter
  var counter = 1;

  //Just need these two variable for getting the ID
  var action = 'update_record';
  var post = $("#master_form_wrapper > form").serialize();

  //Ajax to get the ID
  $.ajax({
    url: general_globals.ajaxurl,
    data: {
      action: action,
      post: post
    },
    type: "post",
    success: function(response) {
      var record = JSON.parse(response);
      var recordID = record.record_id;
      var recid = recordID.split('_').pop();
      var counter = 2;

      //Call prepareUpload() and pass ID and counter and file array 
      //which we have recieved from submit button
      prepareUpload(myFiles, counter, recid);
    }
  });
}