-1

我正在尝试将带有图像的表单提交到 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);运行并将裁剪的值放入输入中，但是代码刚刚结束并且没有提交发生）。我也试图在那条线上设置一个断点，但它从未到达那里。为什么提交被忽略？

4

1 回答 1

1

input type="file"除了清除它之外，您无法设置 a 的值。从规格：

input . value [ = value ]

返回表单控件的当前值。

可以设置，改变值。

当控件是文件上传控件时，如果它设置为空字符串以外的任何值，则引发“ InvalidStateError ” DOMException。

（我的重点）

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

于 2018-01-07T10:01:38.840 回答