I want to upload and preview an image in a web page. I have used so many online available templates/snippets but for some reasons non of them are working to preview the image(js file link is properly added and it is working). I'm unable to figure out that why JavaScript code is not running to preview that image. Lets take this which i took from another answer on stackOverFlow. It is working fine on 'Run Code Snippet'. But not working when i copy the code and use it.
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#preview').attr('src', e.target.result);
$('.previewimg').show();
}
reader.readAsDataURL(input.files[0]);
}
}
$("#uploadImg").change(function(){
readURL(this);
});.previewimg {
background: #ffff33;
width: 500px;
height: auto;
padding: 20px;
border-radius: 20px;
display: none;
}
.previewimg img {
width: 100%;
height: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form id="form1" runat="server"><input type='file' id="uploadImg" /></form><div class="previewimg"><img id="preview" src="#" alt="your image" /></div>I have used many many other snippets as well, image is uploading but preview isn't working.