无法在 then() 中提交表单

Question

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

我的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 ]

返回表单控件的当前值。

可以设置，改变值。

当控件是File Upload 控件时，如果设置为空字符串以外的任何值，则抛出“InvalidStateError”DOMException。

（我的重点）

大概是您从val 收到了该异常，这就是未提交表单的原因。