Menu
I want to display the image before uploading.I tried the following code but it is working only in firefox.but i need to make it work in IE.Could any one suggest me the best solution for this.i am giving my code below could any one figure out where i went I googled nearly one whole day.But couldnt find my solution Here is my code
enter code here
function loadname(img, previewName) {
var isIE = (navigator.appName == "Microsoft Internet Explorer");
var path = img.value;
var ext = path.substring(path.lastIndexOf('.') + 1).toLowerCase();
if (ext == "gif" || ext == "jpeg" || ext == "jpg" || ext == "png") {
if (isIE) {
alert(path);
$('#' + previewName).attr('src', path);
} else {
if (img.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#' + previewName).attr('src', e.target.result);
}
reader.readAsDataURL(img.files[0]);
}
}
}
}
My html is
<body><form method="post" >
<input type="file" class="file" onchange="loadname(this,'previewimg')" id="file" /><img src="about:blank" name="previewimg" id="previewimg" alt="" style="width:2in; height:2in"/>
</form>
272
const chooseFile = document. getElementById("choose-file"); const imgPreview = document. getElementById("img-preview");
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.
First, open the html file you are editing from the File : Open dialog, or from the Open File icon on the toolbar. Click on the toggle Browser Preview on the toolbar or from the View menu. This will give you a quick browser preview. Click on the button again and it will return to the code view.
For security reasons IE9 does not support accessing of files on the client computer, that's why you are not seeing any preview. You would need to upload the image onto your server and then display it.
BIRD'S VIEW
One way could be that on upload, show a progress bar while using ajax to save the file to a temporary folder on your server with the image name as a temporary ID and store the ID it in the database(so that you can delete it later) and then display it in the image control. If you need to delete the file later just delete it by using the ID or if you need it save it, move it to your images folder.
102
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
