Js 图片上传本地预览,这里只展示前端功能的实现方法,并且讲解了 IE 和 Firefox 两者兼容的处理方法。
下面的 code 是上传图片且在本地预览的 Js 函数的实现过程:
function previewImage(file){
var file = document.getElementById("uploadfile");
//IE8 中没有files这一属性,且不支持 FileReader
if(file.files && file.files[0]){
var reader = new FileReader();
reader.onload = function(evt){
//document.getElementById("newimg").src = evt.target.result;
$("#fimg").css("display","block");
$("#fimg").attr("src",evt.target.result);
}
reader.readAsDataURL(file.files[0]);
document.getElementById("imageFileName").value = $("#uploadfile").val();
}else{ // IE 滤镜方式
document.getElementById("uploadfile").select();
var path = document.selection.createRange().text;
//var styleFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'+path+'")';
document.getElementById("preview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='"+path+"')";
$("#fimg").css("display","none");
//通过路径截取文件名字
var fn_arr = path.split("\\");
var fname = fn_arr[fn_arr.length-1];
document.getElementById("imageFileName").value = fname;
}
}
body 中的元素:
<div id="preview" style="width:800px; height:115px; padding-top:15px;">
<img id="oldimg" name="food.picture" src="<%=basePath %>/images/food/qscaipu.jpg" width="136" height="100"
style="float:left;"/>
<img id="newimg" src="" style="display:none; margin-left:60px; float:left;"/>
<div id="filterPreview" style="float:left; margin-left:60px; width:150px; height:100px;"></div>
</div>
<div class="uploader">
<input id="imageFileName" name="imageFileName" class="filename" type="text" readonly="readonly" value="" />
<input class="button" type="button" value="上传..." name="file" />
<input id="uploadfile" name="file" type="file" size="30" class="file" οnchange="previewImage()" />
</div>
<div>
</div>