<div class="imageShow">
<img id="uploadImageShow" src="" onclick="previewImg(this) "/>
</div>
.imageShow {
margin-top: 16px;
width: 200px;
height: 200px;
border: 1px solid rgba(151, 151, 151, 1);
}
.imageShow>img {
width: 100%;
height: 100%;
}
var images
var btnUploadText = '上传';
$(document).ready(function () {
$("#uploadButton").text(btnUploadText)
$(".imageShow").hide()
$('#uploadButton').click(function () {
$('#imagePic').click();
});
$("#imagePic").on("change", function (e) {
var file = e.target.files[0]; //获取图片资源
image=file
$('#image').val(file)
var fileTypes = ["bmp", "jpg", "png", "jpeg"];
var bTypeMatch = false
for (var i = 0; i < fileTypes.length; i++) {
var start = file.name.lastIndexOf(".");
var fileType = file.name.substring(start + 1);
if (fileType.toLowerCase() == fileTypes[i]) {
bTypeMatch = true;
break;
}
}
if (bTypeMatch) {
if (file.size <= 1024 * 1024 * 10) {
var reader = new FileReader();
reader.readAsDataURL(file); // 读取文件
// 渲染文件
reader.onload = function (arg) {
console.log(arg.explicitOriginalTarget.result)
images=arg.explicitOriginalTarget.result
$(".imageShow").show()
$("#uploadImageShow").attr("src", arg.target.result)
btnUploadText = '重新上传'
$("#uploadButton").text(btnUploadText)
}
} else {
alert('仅支持不超过10M的图片');
emptyImageUpload("#imagePic")
$("#uploadImageShow").attr("src", "")
$(".imageShow").hide()
btnUploadText = '上传'
$("#uploadButton").text(btnUploadText)
return false;
}
} else {
alert('仅限bmp,jpg,png,jpeg图片格式');
emptyImageUpload("#imagePic")
$("#uploadImageShow").attr("src", "")
$(".imageShow").hide()
btnUploadText = '上传'
$("#uploadButton").text(btnUploadText)
return false;
}
});
})
//layui预览图片
function previewImg(obj) {
var img = new Image();
img.src = obj.src;
var height = img.height + 50; //获取图片高度
var width = img.width; //获取图片宽度
var imgHtml = "<img src='" + obj.src + "' />";
//弹出层
layer.open({
type: 1,
shade: 0.8,
offset: 'auto',
area: [width + 'px',height+'px'],
shadeClose:true,//点击外围关闭弹窗
scrollbar: false,//不现实滚动条
title: "图片预览", //不显示标题
content: imgHtml, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响
cancel: function () {
//layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', { time: 5000, icon: 6 });
}
});
}