js error : "'createObjectURL' on 'URL': Overload resolution failed."

Question

I try to display an image on a php page in js, knowing that my image via an input file. here is my code:

<script> function image(){ var x = document.getElementById("image_uploads"); var test = URL.createObjectURL(x); //document.getElementById("img").src = URL.createObjectURL(x); } </script> <body> <div class="frItem31"> <form name="saisie" action="" method="post"> Image 1 :<input type="file" id="image_uploads" class="image_uploads" name="image_uploads" accept="image/*"/> <br> <img id="img" class="img"> <br> <input type="button" id="calcVitesse" class="calcVitesse" value="calculer la vitesse" onclick="image()"> </form> </div> </body>

here is the error I get:

Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed. at image (image.php:20:32) at HTMLInputElement.onclick (image.php:80:125) image @ image.php:20 onclick @ image.php:80

Could you help me please !?!

G.B.

traynor · Accepted Answer · 2022-03-26 20:54:10Z

you're passing an HTML element instead of a file. To get the file, use .files property, which behaves like an Array, so you can iterate it. see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files

try this:

 function image() { var x = document.getElementById("image_uploads"); if (x.files.length) { var test = URL.createObjectURL(x.files[0]); } }

Collectives™ on Stack Overflow

js error : "'createObjectURL' on 'URL': Overload resolution failed."

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related