append an image from img src to form data in javascript

Question

I have a div and inside it there is an img tag. I have inserted one image ( eg: "img/flower.png"). On clicking a button, is there any way to append this image to a Form Data, so as to upload them to server in node.js.? Is it possible to upload without using form data?

    <div id="sampleDiv">
    <img src="img/flower.png" id="flower" alt="Rose Flower" />
    </div>
    <input type="button" id="button" value="Upload" name="submit" />
    var form=new Form Data();
    form.append("image",document.getElementbyId("flower").src);

score 0 · Answer 1 · answered Apr 24 '20 at 17:24

The FormData expects a file with parameter like in documentation:

https://developer.mozilla.org/pt-BR/docs/Web/API/FormData/append

You can transform the image to file using FileReader like:

Loading an image to a <img> from <input file>

https://developer.mozilla.org/pt-BR/docs/Web/API/FileReader

append an image from img src to form data in javascript

1 Answers1