从Internet复制粘贴图像到输入字段

Question

I'm using this nice plugin which allow to copy and paste an image from a website to my form. https://github.com/vladmalik/pasteimage

So I can preview the image, but I can't add it to my input field :

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

The function of the plugin is :

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

But what I put in the "value" variable ? thanks

EDIT : my code is :

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

Error : 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.

EDIT 2 : looks like the value property of input:file is read-only so I can't fill it programmatically :(

Answer 1

Two things there

1.you have to display the image while pasting it in the page level

2. You need to give your URL of the image in insertImageUri the back end server will fetch it as image and upload