在提交表单时停止非 Ajax 文件上传答案

【问题标题】：Stop Non-Ajax File Upload on Form Submit在提交表单时停止非 Ajax 文件上传
【发布时间】：2020-07-05 03:31:21
【问题描述】：

我有一个包含一堆文本和日期字段以及“文件”输入的表单（见下文）

<button class="contact100-form-upload-btn" id="uploadbutton" type="button" onclick="document.getElementById('uploadedfile').click()">Upload Picture Identification </button>
<input style="display:none" name="uploadedfile" id="uploadedfile" onchange="selectfile()" type="file" accept="image/*" />

        function selectfile() {
      var x = document.getElementById("progdiv");
      x.style.display = "block";
     var file = _("uploadedfile").files[0];
     //alert(file.name+" | "+file.size+" | "+file.type);
     var formdata = new FormData();
     formdata.append("uploadedfile", file);
     var ajax = new XMLHttpRequest();
     ajax.upload.addEventListener("progress", progressHandler, false);
     ajax.addEventListener("load", completeHandler, false);
     ajax.addEventListener("error", errorHandler, false);
     ajax.addEventListener("abort", abortHandler, false);
     ajax.open("POST", "file_upload_parser.php?confnum=" + <?php echo $confnum ?> + "&file=1"); 
     ajax.send(formdata);
     
     formData.delete(uploadedfile);
     
     document.getElementById("uploadbutton").style.backgroundColor = "#FF5733";
     document.getElementById("uploadbutton").innerHTML = "Photo Uploading";
    }

selectfile() 函数是一个很好的使用 Ajax 的文件上传函数，它显示一个小的上传状态栏，以便用户知道发生了什么。所有这些功能都可以完美运行，并且文件会上传到服务器。问题是当我提交表单时，文件会再次上传，这违背了使用 Ajax 上传它的目的。有没有办法让输入字段（文件）不成为表单的一部分，或者在提交之前从 from 完全删除文件元素（因为它已经上传）？或者也许是我完全想念的另一种方式？

任何帮助将不胜感激。

-劳伦斯

【问题讨论】：

也许您可以尝试使用 event.preventDefault() 在收听file input click 时阻止默认行为
在此处更新您的 selectFile() 函数以获得更清晰的信息。
@sidverma 完成！
其实我想我明白了。从表单类型中删除 "enctype="multipart/form-data".from 似乎可行。

标签： javascript php html ajax

【解决方案1】：

对我有用的是从表单中删除 multipart/form-data 以便它忽略文件上传。

"当你编写客户端代码时：当您的表单包含任何元素时使用 multipart/form-data 否则你可以使用 multipart/form-data 或 application/x-www-form-urlencoded 但 application/x-www-form-urlencoded 会更高效”

如果你想上传一些文件，这个解决方案显然不起作用，但解决了我的问题。

【讨论】：