<script>
function previewImage(file) {
//是否是图片文件
var ext = file.value.substring(file.value.lastIndexOf(".") + 1).toLowerCase()
if (ext != 'png' && ext != 'jpg' && ext != 'jpeg' && ext != 'gif' && ext != 'bmp') {
alert("The format of the picture must be a PNG or JPG or jpeg or GIF or BMP format!");
return;
}
var MAXWIDTH = 296;
var MAXHEIGHT = 178;
var div = document.getElementById('preview');
if (file.files && file.files[0]) {
//div.innerHTML = '<img id=imghead>';
var img = document.getElementById('imghead');
img.onload = function () {
//var rect = clacImgZoomParam(img.clientWidth, img.clientHeight, img.clientWidth, img.clientHeight);
img.width = MAXWIDTH;
img.height = MAXHEIGHT;
img.style.marginLeft = '1px';
img.style.marginTop = '1px';
}
var reader = new FileReader();
reader.onload = function (evt) { img.src = evt.target.result; }
reader.readAsDataURL(file.files[0]);
}
else {
document.getElementById('imghead').style.display = "none";
document.getElementById('imghead2').style.display = "block";
//var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
//file.select();
//var src = document.selection.createRange().text;
//div.innerHTML = '<img id=imghead>';
var img = document.getElementById('imghead2');
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = file.value;
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').sizingMethod = "scale";
//var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.clientWidth, img.clientHeight);
//status = ('rect:' + 1 + ',' + 1 + ',' + rect.width + ',' + rect.height);
//div.innerHTML = "<div id=divhead style='width:" + rect.width + "px;height:" + rect.height + "px;margin-top:" + rect.top + "px;margin-left:" + rect.left + "px;" + sFilter + src + "\"'></div>";
}
}
</script>
<style type="text/css">
#preview span a.ui-input-file {
margin: 0 0 0 0;
margin-left: 130px;
padding: 0;
width: 28px;
height: 28px;
display: inline;
position: absolute;
overflow: hidden;
cursor: pointer;
background: #e5e3e3 url("/resources/images/button_browse.png") no-repeat;
border: none;
text-decoration: none;
}
#preview span {
text-align: center;
position: absolute;
width: 296px;
padding: 0px;
height: 28px;
left: 0px;
bottom: 20px;
color: #FFF;
font-family: '宋体';
font-size: 12px;
line-height: 20px;
background: url(/resources/images/pic_show_bg.png);
bottom: 0;
border-radius: 10px;
}
</style>
<div style="width: 30%; position: relative; margin: 10px 10px;" id="preview">
<div id="imghead2" style="width: 296px; height: 178px; display: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=);"></div>
<img src="~/Files/LILogo/@Model.iiClassListModel.Logo" width="296px" height="178px" id="imghead" style="border-radius: 10px; border: 1px solid #cccccc;" />
<span>
<input id="f" type="file" name="f" οnchange="previewImage(this)" />
<div class="upload"></div>
<input type="hidden" id="hidLogo" name="hidLogo" />
</span>
function previewImage(file) {
//是否是图片文件
var ext = file.value.substring(file.value.lastIndexOf(".") + 1).toLowerCase()
if (ext != 'png' && ext != 'jpg' && ext != 'jpeg' && ext != 'gif' && ext != 'bmp') {
alert("The format of the picture must be a PNG or JPG or jpeg or GIF or BMP format!");
return;
}
var MAXWIDTH = 296;
var MAXHEIGHT = 178;
var div = document.getElementById('preview');
if (file.files && file.files[0]) {
//div.innerHTML = '<img id=imghead>';
var img = document.getElementById('imghead');
img.onload = function () {
//var rect = clacImgZoomParam(img.clientWidth, img.clientHeight, img.clientWidth, img.clientHeight);
img.width = MAXWIDTH;
img.height = MAXHEIGHT;
img.style.marginLeft = '1px';
img.style.marginTop = '1px';
}
var reader = new FileReader();
reader.onload = function (evt) { img.src = evt.target.result; }
reader.readAsDataURL(file.files[0]);
}
else {
document.getElementById('imghead').style.display = "none";
document.getElementById('imghead2').style.display = "block";
//var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
//file.select();
//var src = document.selection.createRange().text;
//div.innerHTML = '<img id=imghead>';
var img = document.getElementById('imghead2');
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = file.value;
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').sizingMethod = "scale";
//var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.clientWidth, img.clientHeight);
//status = ('rect:' + 1 + ',' + 1 + ',' + rect.width + ',' + rect.height);
//div.innerHTML = "<div id=divhead style='width:" + rect.width + "px;height:" + rect.height + "px;margin-top:" + rect.top + "px;margin-left:" + rect.left + "px;" + sFilter + src + "\"'></div>";
}
}
</script>
<style type="text/css">
#preview span a.ui-input-file {
margin: 0 0 0 0;
margin-left: 130px;
padding: 0;
width: 28px;
height: 28px;
display: inline;
position: absolute;
overflow: hidden;
cursor: pointer;
background: #e5e3e3 url("/resources/images/button_browse.png") no-repeat;
border: none;
text-decoration: none;
}
#preview span {
text-align: center;
position: absolute;
width: 296px;
padding: 0px;
height: 28px;
left: 0px;
bottom: 20px;
color: #FFF;
font-family: '宋体';
font-size: 12px;
line-height: 20px;
background: url(/resources/images/pic_show_bg.png);
bottom: 0;
border-radius: 10px;
}
</style>
<div style="width: 30%; position: relative; margin: 10px 10px;" id="preview">
<div id="imghead2" style="width: 296px; height: 178px; display: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=);"></div>
<img src="~/Files/LILogo/@Model.iiClassListModel.Logo" width="296px" height="178px" id="imghead" style="border-radius: 10px; border: 1px solid #cccccc;" />
<span>
<input id="f" type="file" name="f" οnchange="previewImage(this)" />
<div class="upload"></div>
<input type="hidden" id="hidLogo" name="hidLogo" />
</span>
</div>
补充:ie11文档模式切换为ie8时无法实现预览,有高手可以多多指教