I would like to read the URL of an image selected in an <input type="file">tag and then display the corresponding image without uploading the file to the server first.
<input type='flie'id='anything' name='anything'>
and outputted in
<div id='showimg'></div>
without uploading it first.
"Upload" infers transferring an image from the client to the server. If you just want to display the image, that is ENTIRELY different.
what you want is to have your <input type=image>, and have an onchange action which reads the path of the image, and then takes that path and puts in the src part of an img tag.
Something like this: (no guarantee for this to work. look up the specifics...)
<html>
<head>
<script>
function updateimgref(){
var img = document.getElementById("outputimg");
var input = document.getElementById("imginput");
if (input.files && input.files[0]) {
img.href = input.result;
}
}
</script>
</head>
<body>
<input type="image" id="imginput" onchange="updateimgref()">
<img id="outputimg" href="myblankplaceholder.png">
</body>
</html>
se also HTML input type=file, get the image before submitting the form
