How can I make this code work in IE8 and IE9, because it works only in 10
$("#input_file").change( function(event) {
var tmppath = URL.createObjectURL(event.target.files[0]);
$("img").attr('src',tmppath);
});
URL.createObjectURL
Anything already helps (libraries, scripts and etc.)
I found a library capable of doing what you are asking for. This is a polyfill listed in GitHub of the modernizr called mOxie . The library is fantastic except to start development. I had to compile it, then start testing ... then I fixed some compilation errors, and some errors in the generated JavaScript, then it finally worked.
I used the following parts of mOxie:
FileReader
For the difficulty I had in compiling, I decided to create a repository in GitHub with the already compiled version:
\v1.2.1\dist
I put in the folder \v1.2.1\samples , the example of how to do what you said:
image-preview-before-upload.htm
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="moxie.min.js"></script>
<script>mOxie.Env.swf_url = 'Moxie.swf';</script>
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new mOxie.FileReader();
reader.onload = function (e) {
var img = new mOxie.Image();
img.onload = function() {
img.downsize({width:100});
var tgt = document.getElementById("target");
img.embed(tgt);
};
img.load(e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
</head>
<body>
<form id="form1">
<div id="container">
<a id="file-picker" href="javascript:;">Browse...</a>
</div>
<script>
var fileInput = new mOxie.FileInput({
browse_button: 'file-picker', // or document.getElementById('file-picker')
container: 'container',
accept: [
{title: "Image files", extensions: "jpg,gif,png"} // accept only images
],
multiple: true // allow multiple file selection
});
fileInput.onchange = function(e) {
// do something to files array
//console.info(e.target.files); // or this.files or fileInput.files
readURL(this);
};
fileInput.init(); // initialize
</script>
<div id="target"></div>
</form>
</body></html>
It works on IE8 
andIE9. Also in Chrome ,FireFox and Opera 
.
I had trouble with Safari 
,IE6 and IE7 .
Maybeit'sbesttouseaselectiveapproachbetweenmyanswer,yourowncode(shouldworkinSafari),and @CarlosMartins answer (which uses AlphaImageLoader, so I researched it in IE6 and IE7). You could use conditional comments to achieve full compatibility if you want.
To work in IE8 and IE9, mOxie requires either Flash or SilverLight . It looks like they have plans to support the use of Java as well, but for now it does not.
The last time I did it, I hid it when it was ie8
In your case, you would do something like this:
function createObjectURL ( file ) {
if ( window.webkitURL ) {
return window.webkitURL.createObjectURL( file );
} else if ( window.URL && window.URL.createObjectURL ) {
return window.URL.createObjectURL( file );
} else {
return null;
}
}
$("#input_file").change( function(event) {
var tmppath = createObjectURL(event.target.files[0]);
if(tmppath)
$("img").attr('src',tmppath);
else
$("img").hide()
});The solution to your problem I think is here . I tested it in IE7 + and it works.
<style>
#preview_ie {
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
}
</style>
<body>
<div id="preview_ie">
</div>
<form id="form1" runat="server">
<input type='file' id="imgInp" onchange="readURL(this)" />
</form>
<script type="text/javascript">
function readURL(imgFile)
{
var newPreview = document.getElementById("preview_ie");
newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
newPreview.style.width = "160px";
newPreview.style.height = "120px";
}
</Script>
</body>