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