Menu
I want to preview an image before uploading it to the server. I have written a little bit code for it, but it is only being previewed in Internet Explorer, not in other browsers like Safari, Chrome, Firefox, due to some type of security reasons. Is there any solution to preview the image in these browsers?
<body>
<form name="Upload" enctype="multipart/form-data" method="post">
Filename: <INPUT type="file" id="submit">
<INPUT type="button" id="send" value="Upload">
</form>
<div
id="div"
align="center"
style="height: 200px;width: 500px;border-style: ridge;border-color: red">
</div>
</body>
<script type="text/javascript">
var img_id=0
var image = new Array()
document.getElementById('send').onclick=function()
{
img_id++
var id="imgid"+img_id
image = document.getElementById('submit').value;
document.getElementById('div').innerHTML="<img id='"+id+"' src='"+image+"' width=500px height=200px>"
}
</script>
</html>
418
Answer: Use the JS readAsDataURL() Method You can use the JavaScript readAsDataURL() method of the FileReader object to read the contents of the specified file. When the read operation is finished, the readyState becomes DONE, and the loadend is triggered. The FileReader result property returns the file's contents.
The HTML Markup consists of an HTML FileUpload control and a DIV which will be used for displaying live preview of multiple images. Note: For the HTML INPUT FileUpload control it is very important to set the HTML5 multiple property to multiple in order to allow multiple file selection.
Create a div with a class container. Create two more div inside the first div one for the main view and the other for the side view with classes main_view and side_view. Inside the main view insert one image tag with id main.
uploadFile(event: any) {
const image: any = document.getElementById('output');
image.src = URL.createObjectURL(event.target.files[0]);
}<div>
<img id="output" width="200" />
</div>
<div class="form-group">
<label for="exampleFormControlFile1">File Input</label>
<input type="file" (change)="uploadFile($event)" class="form-control-file" />
</div>For Firefox. Because of security it has a truncated path. However, they have provided other ways of doing this:
var img = document.createElement("IMG");
if(document.all)
img.src = document.getElementById('submit').value;
else
// Your solution for Firefox.
img.src = document.getElementById('submit').files.item(0).getAsDataURL();
document.getElementById('div').appendChild(img);
The below is working in Internet Explorer 7 and Firefox 3.
<style type="text/css">
#prevImage {
border: 8px solid #ccc;
width: 300px;
height: 200px;
}
</style>
<script type="text/javascript">
function setImage(file) {
if(document.all)
document.getElementById('prevImage').src = file.value;
else
document.getElementById('prevImage').src = file.files.item(0).getAsDataURL();
if(document.getElementById('prevImage').src.length > 0)
document.getElementById('prevImage').style.display = 'block';
}
</script>
<pre>
IE8 needs a security settings change: internet settings, security, custom level :
[] Include local directory path when uploading files to a server
( ) Disable
(o) Enable
</pre>
<form>
<input type="file" name="myImage" onchange="setImage(this);" />
</form>
<img id="prevImage" style="display:none;" />
Documentation of File List object on MDC
124
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
