带有 Jquery 的 Cloudinary 上传小部件“无法在 'HTMLInputElement' 上设置 'value' 属性”答案

【问题标题】：Cloudinary upload widget with Jquery "Failed to set the 'value' property on 'HTMLInputElement'"带有 Jquery 的 Cloudinary 上传小部件“无法在 'HTMLInputElement' 上设置 'value' 属性”
【发布时间】：2015-02-28 14:54:21
【问题描述】：

我正在尝试在网站上包含 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.

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

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

【问题讨论】：

标签： jquery image widget cloudinary

【解决方案1】：

这几天，我也遇到了同样的错误。我的代码的 sn-p：

<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);

不允许设置“输入”的值。

【讨论】：

遇到同样的事情。找到解决方案了吗？

【解决方案2】：

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

【讨论】：

您好 Itay，感谢您的输入，但我查看了控制台，其中出现了此错误：未捕获的 InvalidStateError：无法在 'HTMLInputElement' 上设置 'value' 属性：此输入元素接受一个文件名，只能以编程方式设置为空字符串。我刚刚意识到它正在尝试设置 input[type=file] 字段的值。由于安全原因，这是不允许的，因此我无法使用它。我使用 PHP/GD 制作了一个自定义裁剪工具，它在图像重采样方面可能不如云端工具那么好，但它可以完成这项工作。

【解决方案3】：

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

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

【讨论】：

看起来您在调用页面中存在一个名为 userPhoto 的文件类型字段。如果是这样，请注意这应该是隐藏字段而不是文件字段。上传完成后，Cloudinary 会尝试在提供的字段上设置响应。这样您就可以直接使用 Cloudinary，无需其他工具。
我记得我还需要一个文件输入才能将其上传到服务器。我只需要删除并上传到我自己的服务器，而不仅仅是 cloudinary。