前台部分:
1.图片文件需要预览,网页因安全考虑,不允许image加载本地路径图片,借鉴滤镜法进行图片预览
html部分:
<label class="form-label col-xs-4 col-sm-3">照片:</label>
<div class="col-xs-8 col-sm-9">
<img class="col-xs-4 col-sm-3 " id="serverImage" name="serverImage">
依然使用image作为图片容器
js部分:
function srcChanged(imagId,fileId){
var pic = document.getElementById(imagId);
var file = document.getElementById(fileId);
if(window.FileReader){//chrome,firefox7+,opera,IE10,IE9,IE9也可以用滤镜来实现
oFReader = new FileReader();
oFReader.readAsDataURL(file.files[0]);
oFReader.onload = function (oFREvent) {pic.src = oFREvent.target.result;};
}
else if (document.all) {//IE8-
file.select();
var reallocalpath = document.selection.createRange().text//IE下获取实际的本地文件路径
if (window.ie6) pic.src = reallocalpath; //IE6浏览器设置img的src为本地路径可以直接显示图片
else { //非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片,但是可以通过滤镜来实现,IE10浏览器不支持滤镜,需要用FileReader来实现,所以注意判断FileReader先
pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaIma