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>
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>
1 Answer
Reset to default 6For security reasons IE9 does not support accessing of files on the client puter, 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.