Question

文件上传到HTML表单之后但在提交之前会发生什么？

我将简历上传到此网站https://studyhut.com/employment/，然后点击红色X将其删除，但我想确保它已被删除。

检查作为“选择文件”按钮的元素，我看到它的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的了解，我应该看一下控制id gform_browse_button_5_6的代码或类按钮gform_button_select_files（哪一个？），但源代码中有一些gajillion脚本。

如何在Firefox中使用检查器查明id或类所在的位置或2.一般来说，我的简历在上传和提交表单之间是否安全？我之前读过，提交文件后存储在服务器上的一个临时文件夹中，然后可以由PHP处理，但是当我选择要上传的文件时它发生了什么，它显示了带有删除选项的文件名它（可能用AJAX更新了页面）？

更新：我在https://studyhut.com/wp-content/plugins/gravityforms/js/gravityforms.min.js?ver=2.0.7找到了一个处理gform_button_select_files类的地方，代码是

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 看起来c是在另一个函数

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

重力形成js src

https://studyhut.com/wp-content/plugins/gravityforms/js/jquery.json.js?ver=2.0.7
/ *！[CDATA [ / var gform_gravityforms = {“strings”：{“invalid_file_extension”：“不允许这种类型的文件。必须是以下之一：”，“delete_file”：“删除此文件”，“in_progress”：“正在进行中”， “file_exceeds_limit”：“文件超出大小限制”，“illegal_extension”：“不允许此类型的文件。”，“max_reached”：“达到的最大文件数”，“unknown_error”：“保存时出现问题服务器上的文件“，”current_uploading“：”请等待上传完成“，”取消“：”取消“，”取消_upload“：”取消此上传“，”取消“：”取消“}，”变种“ ：{ “images_url”： “https://studyhut.com/wp-content/plugins/gravityforms/images”}}; / ]]＆gt; * /
https://studyhut.com/wp-content/plugins/gravityforms/js/gravityforms.min.js?ver=2.0.7
https://studyhut.com/wp-content/plugins/gravityforms/js/conditional_logic.min.js?ver=2.0.7
https://studyhut.com/wp-includes/js/plupload/plupload.full.min.js?ver=2.1.8
https://studyhut.com/wp-content/plugins/gravityforms/js/jquery.maskedinput.min.js?ver=2.0.7

最后这是用于单击删除按钮的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))}}}

Answer 1

从我可以看到你的简历不安全它通过ajax帖子发送到服务器上。单击上载时，您可以从检查器的网络选项卡中看到此信息。一旦它进入服务器，您无法做任何事情来查看他们在该文件中的位置。

但有一件事，这是一个基于WordPress构建的网站，使用重力形式进行上传，你可以进一步了解它以及它期望你在后端做什么（常见做法）如果你感兴趣但是有仍不能保证他们在后端做了什么

更新

再看一遍之后，我认为服务器不会删除你上传的文件。再次通过检查上传时的网络选项卡，您将看到通过POST向服务器发出ajax请求，现在当您单击删除时，没有对服务器发出请求，并且只在前端进行更改要经过的DELETE请求，但事实并非如此。因此，服务器保持您的上传，但无法知道他们正在做什么。如果在一段时间后没有链接到任何东西或者只是永远保留它，它们可能会删除它。

第一个ajax请求看起来是通过https://studyhut.com/wp-includes/js/plupload/plupload.full.min.js?ver=2.1.8插件

启动的

Answer 2

文件上传到HTML表单后会发生什么，但是   在提交之前？

但是当我选择要上传的文件时发生了什么   它显示文件名，并带有删除选项

请注意，现在可以将.files元素的<input type="file">属性设置为FileList .length 0且不包含File的对象1}}对象，请参阅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处的代码执行相同的过程而不查看document上使用的完整HTML和JavaScript。

将文件上传到HTML表单并提交之间会发生什么？

2 个答案: