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

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 的代码(哪一个？)，但是源代码中有大量脚本。

1. 如何使用 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":"保存文件时出现问题服务器上的文件","currently_uploading":"请等待上传完成","cancel":"取消","cancel_upload":"取消本次上传","cancelled":"已取消"},"vars":{"images_url":"https://studyhut.com/wp-content/plugins/gravityforms/images"}}; / ]]> */

• 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 发起的插件