无法在 then() 中提交表单

Question

我正在尝试将带有图像的表单提交到 php 页面，我正在使用 croppie 裁剪图像并将结果放入 "input" 文件元素中，然后我想提交我的表格。

我的 js:

$('#submit-button').on('click', function(e) {
    $('#imagePreview').croppie('result', {
       type: 'canvas',
       size: 'viewport'
    }).then(function (resp) {
       $('#fileInput').val(resp);
       $('#ppForm').submit();
    });
});

我的html:

<form id="ppForm" enctype="multipart/form-data" action="upload_profile_picture.php" method="post">
   <input id="fileInput" name="fileInput" type="file" accept="image/*" onchange="displayPreview(this)" required>
   <img id="imagePreview" class="croppie-container">
   <input type="button" value="submit" id="submit-button"/>
</form>

问题是，这一行 $('#ppForm').submit(); 由于某种原因被跳过（我已经使用 javascript 调试了 js，我看到 $('#fileInput').val(resp); 运行并将裁剪后的值放入输入，但代码刚刚结束并且没有提交发生）。我也试图在那条线上设置一个断点，但它从未到达那里。为什么提交被忽略？

Answer 1

您不能设置 input type="file" 的值，只能清除它。来自 the spec:

input . value [ = value ]

Returns the current value of the form control.

Can be set, to change the value.

Throws an "InvalidStateError" DOMException if it is set to any value other than the empty string when the control is a File Upload control.

（我的重点）

据推测，您从 val 收到了异常，这就是未提交表单的原因。

无法在 then() 中提交表单

Can't submit form inside a then()

javascript

jquery

submit

promise

croppie