Cloudinary 上传小部件 Jquery "Failed to set the 'value' property on 'HTMLInputElement'"

Question

我正在尝试在网站上包含 cloudinary 的 jquery 小部件，以便它允许客户端能够在上传之前裁剪图像。（基本上是个人资料照片）。我在页面中添加了以下代码：

$('#upload_widget_opener').cloudinary_upload_widget(
{ cloud_name: 'moin-qidwai-me', upload_preset: 'zn7qhrdi' ,'form':'#profile-setting',
'field_name':'userPhoto', 'thumbnails':'#user_photo', cropping: 'server', 'folder':
'user_photos' },
function(error, result) { console.log(error, result) });

我正在测试一些东西，因此我注释掉了这段代码，当我取消注释时，它显然停止运行并给我这个错误：

 Uncaught InvalidStateError: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

我现在通过撤消使整个文件处于与评论之前相同的状态，所以它不可能是我在评论之后所做的任何事情，但这就是它如此奇怪的原因。

另一个问题是，即使它正在工作，它也会添加一个隐藏类型的输入字段，有没有办法我可以获取上传图像的 url 并设置我自己的值输入字段 url?

Answer 1

你能看看加载页面时控制台（在开发者工具下）是否包含任何 JS 错误吗？当缺少 JS 文件包含时，可能会发生这种情况。

Answer 2

我通过为 PHP/GD 制作自定义裁剪工具并使用 javascript/Jquery 处理前端内容解决了这个问题。

如果有人偶然发现这个问题并需要更多帮助，请告诉我。

Answer 3

这几天，我也遇到了同样的错误。我的代码片段：

<input id="fileDialog" type="file"/> 

var chooser = document.querySelector('#fileDialog');
var choosed_file_path = ""; 
chooser.addEventListener("change", function(evt) {   
    //$("#fileDialog").val(this.value);  // error
    choosed_file_path = this.value;
}, false);

不允许设置 "input" 的值。

Cloudinary 上传小部件 Jquery "Failed to set the 'value' property on 'HTMLInputElement'"

Cloudinary upload widget with Jquery "Failed to set the 'value' property on 'HTMLInputElement'"

jquery

image

widget

cloudinary