从互联网复制粘贴图像到输入字段答案

【问题标题】：Copy-Paste image from internet to input field从互联网复制粘贴图像到输入字段
【发布时间】：2016-01-09 15:38:22
【问题描述】：

我正在使用这个不错的插件，它允许将图像从网站复制并粘贴到我的表单中。 https://github.com/vladmalik/pasteimage

所以我可以预览图像，但我不能将它添加到我的输入字段：

<input type="file" id="eventPicture" accept="image/*">

插件的作用是：

function insertImageURI(value) {
    // parse the uri to strip out "base64"
    var sourceSplit = value.split("base64,");
    var sourceString = sourceSplit[1];
    // Write base64-encoded string into input field
    $("input").val(sourceString);
}

但是我在“价值”变量中放了什么？谢谢

编辑：我的代码是：

<script>
        function callback(src) {
            //do something e.g., assign src to image
            showImage(src);
            insertImageURI(src); // ERROR
        }

        $(function() {
            $.pasteimage(callback);
        });

        function showImage(src) {
          $('#pasteImage').attr("src", src);
        }

        function insertImageURI(value) {
            // parse the uri to strip out "base64"
            var sourceSplit = value.split("base64,");
            var sourceString = sourceSplit[1];
            // Write base64-encoded string into input field
            $('#eventPicture').val(sourceString);
        }
    </script>

错误：未捕获的 InvalidStateError：无法在“HTMLInputElement”上设置“值”属性：此输入元素接受文件名，该文件名只能以编程方式设置为空字符串。

EDIT 2 : 看起来 input:file 的 value 属性是只读的，所以我不能以编程方式填充它:(

【问题讨论】：

阅读documentation，我认为你需要做这样的事情$.pasteimage(insertImageURI); ...你的insertImageURI被具有适当值的“插件”调用（它将是一个数据 URI 的外观）

标签： javascript image forms

【解决方案1】：

有两件事

1.您必须在页面级别粘贴时显示图像

您需要在 insertImageUri 中提供图片的 URL，后端服务器会将其获取为图片并上传

【讨论】：