JS：带文件输入的 FormData 导致 Ajax 请求崩溃

Question

遇到了一个非常奇怪的问题，直到我将代码推送到实时服务器并尝试在我的 iPhone 上使用它之后才出现。

这是提交给我设置为记录所有传入请求（以及标头和方法）的 node.js 脚本，当出现以下问题时，日志显示没有收到任何内容。

无论如何：

$('#addrecord').on('submit', function(e) {
e.preventDefault();
var url = '/admin/app/addrecord'
    var data = $('#addrecord')[0];
    var formData = new FormData(data);

            $.ajax({ // create an AJAX call...
             data: formData,
             processData: false,
             contentType: false,
             cache: false,
             type: "POST", // GET or POST
             url: url, // the file to call
             success: function(response) { // on success..
                if (response.name == 200) {
                    if (response.message == "add") {addComplete(response.address);}
                    else {editComplete(response.address);};
                 }
                 else {
                    console.log("Form Rejected");        
                 }  
              },
              error: function(response) { 
                console.log("Error - " + JSON.stringify(response));
              } 
          });
    });

这与我的 html 文件中通常的 <form id="addrecord" method="post" enctype="multipart/form-data" role="form"> ... </form> 配对。

所以问题是这个表单我有一个<input type="file" id="photo" name="photo"> 输入字段。如果我尝试在未在此输入中选择图像的情况下提交表单，则表单不会发送任何内容而只是挂起。服务器绝对没有收到任何内容（请记住，我正在记录每个请求）。

现在，如果我使用文件输入从手机中选择图像，或者如果我编辑 html 以删除输入文件字段，Ajax 请求会顺利触发，并且我的 node.js 服务器会完美接收所有内容.

我真的被这个难住了。有任何想法吗？

Answer 1

显然，这是 Safari 中的一个错误。

最终检测是否选择了文件，如果没有，则在提交表单之前从 DOM 中删除元素。