Upload Image Preview code created by Button doesn't preview the image. Javascript/HTML
Question
So basically i'm stuck. I created a simple upload image button that allows me to preview the image file that i uploaded. I also created a button that creates another upload image button the button is called "Try It". My first upload image button, previews the image correctly, but when i push the "Try It" to create another upload image button and upload another image, it does not preview on the additional upload image button. I just want to know how i can fix it. Below is the full code:
function myFunction() { var x = document.createElement("INPUT"); x.type = "file"; x.id= "file-upload" x.onchange= "previewFile()"; document.getElementById("wtf").appendChild(x); var y = document.createElement('IMG'); y.src= ""; y.alt= "Image preview..."; document.getElementById("preview").appendChild(y); } function previewFile(){ var preview = document.querySelector('img'); //selects the query named img var file = document.querySelector('input[type=file]').files[0]; //sames as here var reader = new FileReader(); reader.onloadend = function () { preview.src = reader.result; } if (file) { reader.readAsDataURL(file); //reads the data as a URL } else { preview.src = ""; } }
<!DOCTYPE html> <html> <body> <p>Click the button to create a File Upload Button.</p> <button onclick="myFunction()">Try it</button> <p id="wtf"> <input id="file-upload" type="file" onchange="previewFile()"> </p> <p id="preview"> <img src="" height="200" alt="Image preview..."> </p> </body> </html>
1 answers
solution1
1 2018-08-09 17:27:21
First of all element.onchange takes a function and not a string i changed that also since you need to show different previews with different buttons you need a way to distinguish between them. I am creating a global variable i to keep track of it and passing it to the previewFile function as a parameter.
Here is the code:
var i = 0; function previewFile(index){ var preview = document.querySelectorAll('img'); //selects the query named img var file = document.querySelectorAll('input[type=file]')[index].files[0]; //sames as here var reader = new FileReader(); reader.onloadend = function () { preview[index].src = reader.result; } if (file) { reader.readAsDataURL(file); //reads the data as a URL } else { preview.src = ""; } } function myFunction() { i++; var y = document.createElement('IMG'); y.src= ""; y.alt= "Image preview..."; y.height = 200; document.getElementById("preview").appendChild(y); var x = document.createElement("INPUT"); x.type = "file"; x.id= "file-upload" x.onchange= function(){previewFile(i)}; document.getElementById("wtf").appendChild(x); }
<!DOCTYPE html> <html> <body> <p>Click the button to create a File Upload Button.</p> <button onclick="myFunction()">Try it</button> <p id="wtf"> <input id="file-upload" type="file" onchange="previewFile(0)"> </p> <p id="preview"> <img src="" height="200" alt="Image preview..."> </p> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.