Question

我正在尝试将带有图像的表单提交到php页面，我使用croppie裁剪图像并将结果放入＆＃34;输入＆＃34;文件元素，之后我想提交表格。

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

返回表单控件的当前值。

可以设置，更改值。

当控件为InvalidStateError控件时，如果将其设置为空字符串以外的任何值，则会引发“DOMException”File Upload。

（我的重点）

据推测，您从val获得了该例外，这就是未提交表单的原因。

无法在then（）中提交表单

1 个答案: