<tr>
<td style="width:35%;" class="noBorderL firstTD">资格证图片</td>
<td style="width:65%;" class="secondTDnd">
<div id="preDiv" style="display:none;vertical-align: middle;border: 1px solid #e5e5e5;width:50px;height:50px; " ></div>
<img id="preImg" src="${certificate.sys_certificate_img}" style="vertical-align: middle;border: 1px solid #e5e5e5;width:50px;height:50px; <#if (certificate.sys_certificate_img=='')>display:none</#if> " />
<input name="file" οnchange="PreviewImage(this, 'preImg', 'preDiv')" type="file" class="inputSty required"/>
</td>
</tr>
var allowExtention = ".jpg,.bmp,.gif,.png"; //允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;
var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase();
var browserVersion = window.navigator.userAgent.toUpperCase();
var preImg = $($(fileObj).parent().find("img")[0]);
if (allowExtention.indexOf(extention) > -1) {
if (fileObj.files) {//HTML5实现预览,兼容chrome、火狐7+等
if (window.FileReader) {
var reader = new FileReader();
reader.onload = function (e) {
preImg.attr("src", e.target.result);
}
reader.readAsDataURL(fileObj.files[0]);
preImg.show();
} else if (browserVersion.indexOf("SAFARI") > -1) {
alert("不支持Safari6.0以下浏览器的图片预览!");
}
} else if (browserVersion.indexOf("MSIE") > -1) {
if (browserVersion.indexOf("MSIE 6") > -1) {//ie6
preImg.attr("src", fileObj.value);
preImg.show();
} else {//ie[7-9]
fileObj.select();
if (browserVersion.indexOf("MSIE 9") > -1){
fileObj.blur(); //不加上document.selection.createRange().text在ie9会拒绝访问
}
var newPreview = document.getElementById(divPreviewId);
if (newPreview == null) {
newPreview = document.createElement("div");
newPreview.setAttribute("id", divPreviewId);
newPreview.style.width = document.getElementById(imgPreviewId).width + "px";
newPreview.style.height = document.getElementById(imgPreviewId).height + "px";
newPreview.style.border = "solid 1px #d2e2e2";
}
newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
$(newPreview).css("display","inline-block");
preImg.hide();
}
} else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
if (firefoxVersion < 7) {//firefox7以下版本
preImg.attr("src", fileObj.files[0].getAsDataURL());
} else {//firefox7.0+
preImg.attr("src", window.URL.createObjectURL(fileObj.files[0]));
}
preImg.show();
} else {
preImg.attr("src", fileObj.value);
preImg.show();
}
} else {
layer.msg("仅支持" + allowExtention + "为后缀名的文件!");
fileObj.value = ""; //清空选中文件
if (browserVersion.indexOf("MSIE") > -1) {
fileObj.select();
document.selection.clear();
}
fileObj.outerHTML = fileObj.outerHTML;
}
}
<td style="width:35%;" class="noBorderL firstTD">资格证图片</td>
<td style="width:65%;" class="secondTDnd">
<div id="preDiv" style="display:none;vertical-align: middle;border: 1px solid #e5e5e5;width:50px;height:50px; " ></div>
<img id="preImg" src="${certificate.sys_certificate_img}" style="vertical-align: middle;border: 1px solid #e5e5e5;width:50px;height:50px; <#if (certificate.sys_certificate_img=='')>display:none</#if> " />
<input name="file" οnchange="PreviewImage(this, 'preImg', 'preDiv')" type="file" class="inputSty required"/>
</td>
</tr>
//js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
function PreviewImage(fileObj, imgPreviewId, divPreviewId) {var allowExtention = ".jpg,.bmp,.gif,.png"; //允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;
var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase();
var browserVersion = window.navigator.userAgent.toUpperCase();
var preImg = $($(fileObj).parent().find("img")[0]);
if (allowExtention.indexOf(extention) > -1) {
if (fileObj.files) {//HTML5实现预览,兼容chrome、火狐7+等
if (window.FileReader) {
var reader = new FileReader();
reader.onload = function (e) {
preImg.attr("src", e.target.result);
}
reader.readAsDataURL(fileObj.files[0]);
preImg.show();
} else if (browserVersion.indexOf("SAFARI") > -1) {
alert("不支持Safari6.0以下浏览器的图片预览!");
}
} else if (browserVersion.indexOf("MSIE") > -1) {
if (browserVersion.indexOf("MSIE 6") > -1) {//ie6
preImg.attr("src", fileObj.value);
preImg.show();
} else {//ie[7-9]
fileObj.select();
if (browserVersion.indexOf("MSIE 9") > -1){
fileObj.blur(); //不加上document.selection.createRange().text在ie9会拒绝访问
}
var newPreview = document.getElementById(divPreviewId);
if (newPreview == null) {
newPreview = document.createElement("div");
newPreview.setAttribute("id", divPreviewId);
newPreview.style.width = document.getElementById(imgPreviewId).width + "px";
newPreview.style.height = document.getElementById(imgPreviewId).height + "px";
newPreview.style.border = "solid 1px #d2e2e2";
}
newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
$(newPreview).css("display","inline-block");
preImg.hide();
}
} else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
if (firefoxVersion < 7) {//firefox7以下版本
preImg.attr("src", fileObj.files[0].getAsDataURL());
} else {//firefox7.0+
preImg.attr("src", window.URL.createObjectURL(fileObj.files[0]));
}
preImg.show();
} else {
preImg.attr("src", fileObj.value);
preImg.show();
}
} else {
layer.msg("仅支持" + allowExtention + "为后缀名的文件!");
fileObj.value = ""; //清空选中文件
if (browserVersion.indexOf("MSIE") > -1) {
fileObj.select();
document.selection.clear();
}
fileObj.outerHTML = fileObj.outerHTML;
}
}