C # asp:fileupload upload file using JS to achieve the preview effect

JS Code:

<script type= "Text/javascript" >
Below for image upload preview function
function Setimagepreview () {
var docobj = document.getElementById ("fileimg");

var Imgobjpreview = document.getElementById ("preview");
if (Docobj.files && docobj.files[0]) {
Under Firefox, set the IMG property directly
ImgObjPreview.style.display = ' block ';
ImgObjPreview.style.width = ' 150px ';
ImgObjPreview.style.height = ' 180px ';
IMGOBJPREVIEW.SRC = Docobj.files[0].getasdataurl ();

Firefox 7 or above can not be used in the above Getasdataurl () way to get, need a way
imgobjpreview.src = window. Url.createobjecturl (Docobj.files[0]);
}
else {
Under IE, use filters
Docobj.select ();
var imgsrc = Document.selection.createRange (). text;
var localimagid = document.getElementById ("Localimag");
Initial size must be set
LocalImagId.style.width = "150px";
LocalImagId.style.height = "180px";
Image exception capture to prevent users from modifying the suffix to forge a picture
try {
LocalImagId.style.filter = "Progid:DXImageTransform.Microsoft.AlphaImageLoader (Sizingmethod=scale)";
LocalImagId.filters.item ("DXImageTransform.Microsoft.AlphaImageLoader"). src = imgsrc;
}
catch (e) {
Alert ("The image you uploaded is not in the correct format, please select it again!");
return false;
}
ImgObjPreview.style.display = ' None ';
Document.selection.empty ();
}
}

HTML interface

<div id= "Localimag" >

</div>
<asp:fileupload id= "fileimg" runat= "Server" cssclass= "fileimg" onchange= "Javascript:setimagepreview ();"/>

Test: Google Chrome and IE browser no problem!

C # asp:fileupload upload file using JS to achieve the preview effect