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

Question

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

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

任何帮助将不胜感激。

-劳伦斯

Answer 1

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

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

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