Что происходит между загрузкой файла в форму HTML и его отправкой?

Что происходит с файлом после его загрузки в форму HTML, но до его отправки?

Я загрузил свое резюме на этот сайт https://studyhut.com/employment/ а затем щелкнул красный крестик, чтобы удалить его, но я хочу убедиться, что оно действительно было удалено.

Осматривая элемент, который является кнопкой Выбрать файлы, я вижу, что его HTML

input id="gform_browse_button_5_6" value="Select files" class="button gform_button_select_files" aria-describedby="extensions_message" tabindex="9" style="position: relative; z-index: 1;" type="button">

Основываясь на моих знаниях JavaScript, я должен взглянуть на код, который управляет идентификатором gform_browse_button_5_6 или кнопкой класса gform_button_select_files (какой?), Однако в исходном коде есть сценарии gajillion.

  1. Как использовать инспектор в Firefox, чтобы точно определить, где находится идентификатор или класс, или 2. Вообще говоря, безопасно ли мое резюме между его загрузкой и отправкой формы? Ранее я читал, что после отправки файлы хранятся во временной папке на сервере, которая затем может быть обработана PHP, но что происходит в тот момент, когда я выбрал файл для загрузки, и он показывает имя файла с возможностью удаления это (вероятно, обновил страницу с AJAX)?

ОБНОВЛЕНИЕ: Я нашел одно место, где класс gform_button_select_files обрабатывается в https://studyhut.com/wp-content/plugins/gravityforms/js/gravityforms.min.js?ver=2.0.7 и код

b(document).ready(function(){"undefined"!=typeof adminpage&&"toplevel_page_gf_edit_forms"===adminpage||"undefined"==typeof plupload?b(".gform_button_select_files").prop("disabled",!0):"undefined"!=typeof adminpage&&adminpage.indexOf("_page_gf_entries")>-1&&b(".gform_fileupload_multifile").each(function(){c(this)})}),a.setup=function(a){c(a)}}(window.gfMultiFileUploader=window.gfMultiFileUploader||{},jQuery);var __gf_keyup_timeout;jQuery(document).on("change keyup",".gfield_trigger_change input, .gfield_trigger_change select, .gfield_trigger_change textarea",function(a){gf_raw_input_change(a,this)}),!window.rgars,!window.rgar,String.prototype.format=function(){var a=arguments;return this.replace(/{(\d+)}/g,function(b,c){return"undefined"!=typeof a[c]?a[c]:b})};

Означает ли это что-нибудь для кого-то или это значит быть нечитаемым человеком?

Обновление II Похоже, с определен внутри другой функции

)}};!function(a,b){function c(c){function g(a,c){b("#"+a).prepend("<li>"+c+"</li>")}

Гравитационные формы JS SRC

Наконец, это HTML-код для нажатия на кнопку удаления

img class="gform_delete" src="https://studyhut.com/wp-content/plugins/gravityforms/images/delete.png" onclick="gformDeleteUploadedFile(5,6, this);" onkeypress="gformDeleteUploadedFile(5,6, this);" alt="Delete this file" title="Delete this file">

а вот функция gformDeleteUploadedFile

function gformDeleteUploadedFile(a,b,c){var d=jQuery("#field_"+a+"_"+b),e=jQuery(c).parent().index();d.find(".ginput_preview").eq(e).remove(),d.find('input[type="file"]').removeClass("gform_hidden"),d.find(".ginput_post_image_file").show(),d.find('input[type="text"]').val("");var f=jQuery("#gform_uploaded_files_"+a).val();if(f){var g=jQuery.secureEvalJSON(f);if(g){var h="input_"+b,i=d.find("#gform_multifile_upload_"+a+"_"+b);if(i.length>0){g[h].splice(e,1);var j=i.data("settings"),k=j.gf_vars.max_files;jQuery("#"+j.gf_vars.message_id).html(""),g[h].length<k&&gfMultiFileUploader.toggleDisabled(j,!1)}else g[h]=null;jQuery("#gform_uploaded_files_"+a).val(jQuery.toJSON(g))}}}
Источник

2 ответа

Решение

Из того, что я вижу, ваше резюме небезопасно, оно отправляется на сервер при загрузке через ajax-пост. Вы можете увидеть это на вкладке сети вашего инспектора при нажатии кнопки загрузки. Как только он идет на сервер, вы ничего не можете сделать, чтобы увидеть, что они делают с этим файлом.

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

Обновить:

После еще одного взгляда на это, я думаю, что сервер не удаляет загруженный вами файл. Снова, проверив вкладку сети при загрузке, вы увидите, что ajax-запрос отправляется на сервер через POST, теперь, когда вы нажимаете "Удалить", на сервер не поступает никаких запросов, а изменения вносятся только в интерфейс, который вы ожидаете. DELETE запрос, чтобы пройти, но это не так. Таким образом, сервер хранит вашу загрузку, но нет никакого способа узнать, что они с ней делают. Может случиться так, что они удалят его, если через какое-то время не будут связаны с чем-либо или просто сохранят его навсегда.

Первый ajax-запрос выглядит инициированным через плагин https://studyhut.com/wp-includes/js/plupload/plupload.full.min.js?ver=2.1.8

Источник

Что происходит с файлом после его загрузки в форму HTML, но до его отправки?

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

Обратите внимание, что теперь можно установить .files свойство <input type="file"> элемент к FileList объект, имеющий .length0 и не содержит File объекты, см. Make.files settable # 2866.

<input type="file" />
<input type="button" value="Delete Files" />
<script>
  const input = document.querySelector("input[type=file]");
  const button = document.querySelector("input[type=button]");

  let files = input.files; // `FileList` object
  
  console.log(files);
  // set `.files` of `<input type="file">` to `FileList`
  const setFiles = (element, files) => {
    if (element.files.length) {
      element.files = files; // set `.files` of `<input>` element
      console.log(element, element.files);
    }
  };

  input.onchange = () => {
    if (input.files.length > 0) {
      // do stuff
      console.log(input.files);
    }
  }

  button.onclick = () => {
    setFiles(input, files);
  }
</script>

Не может быть уверен, что код на document что вы ссылаетесь, выполняет ту же процедуру, не просматривая полный HTML и JavaScript, используемые на document,

Источник
Другие вопросы по тегам