i have developed a web application in asp.net , there is a page in this project which user should choose a file in picture format (jpeg,jpg,bmp,...) and i want
to preview image in
the page but i don't want
to post file
to server i want
to handle it in client i have done it with java scripts functions via file API but it only works in IE9 but most of costumers use IE8
the reason is that IE8 doesn't support file API is there any way
to make IE8 upgrade or some patches in code behind i mean that check if
the browser is IE and not support file API call a function which upgrades IE8
to IE9 automatically.
i don't want
to ask user
to do it in message i want
to do it programmatic !!
even if it is possible install a special patch that is required for file API because customers thought it is a bug in my application and their computer knowledge is low what am i supposed
to do with this?
i also use Async File Upload Ajax Control But it post
the file
to server any way with ajax solution and http handler but java scripts do it all in client browser!!!
following script checks
the browser supports API or not
<script>
if (window.File && window.FileReader && window.FileList && window.Blob)
document.write("<b>File API supported.</b>");
else
document.write('<i>File API not supported by this browser.</i>');
</script>
following scripts do
the read and Load Image
function readfile(e1)
{
var filename = e1.target.files[0];
var fr = new FileReader();
fr.onload = readerHandler;
fr.readAsText(filename);
}
HTML code:
<input type="file" id="getimage">
<fieldset><legend>Your image here</legend>
<div id="imgstore"></div>
</fieldset>
JavaScript code:
<script>
function imageHandler(e2)
{
var store = document.getElementById('imgstore');
store.innerHTML='<img src="' + e2.target.result +'">';
}
function loadimage(e1)
{
var filename = e1.target.files[0];
var fr = new FileReader();
fr.onload = imageHandler;
fr.readAsDataURL(filename);
}
window.onload=function()
{
var x = document.getElementById("filebrowsed");
x.addEventListener('
change', readfile, false);
var y = document.getElementById("getimage");
y.addEventListener('
change', loadimage, false);
}
</script>
