展示图
html
<div class="storeImg border20">
<div class="storeImgFont ">店铺门头</div>
<div class="uploadImg">
<div class="uploadInfo clear">
<div id="imgBox" class="l">
</div>
<div class="upImg l">
<input type="file" title="请选择图片" id="file" class="input_img" multiple="" accept="image/*" capture="camera">
<div class="posinfo">
<img class="upImgs" src="img/camera.png"/>
<span class="upfont">上传图片</span>
</div>
</div>
</div>
</div>
</div>
样式
样式
样式
.uploadImg{
padding:.2rem 0 .2rem .28rem;
}
.upImg{
text-align: center;
width: 1.2rem;
height: 1.2rem;
border: 1px dashed #eee;
position: relative;
z-index: 0;
}
.posinfo{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
text-align: center;
z-index: 2;
}
.upImgs{
width: .36rem;
height: .34rem;
margin-top:.3rem ;
}
.upfont{
display: block;
font: .18rem/.32rem "微软雅黑";
color: #acacac;
text-align: center;
}
#imgBox {
text-align: left;
min-width: 1.2rem;
height: 1.2rem;
display: none;
}
.imgContainer {
display: inline-block;
width: 1.2rem;
height: 1.2rem;
position: relative;
box-sizing: border-box;
margin: 0 .1rem;
}
.imgContainer:last-child{
margin-right:.2rem ;
}
.imgContainer img {
width: 1.2rem;
height: 1.2rem;
cursor: pointer;
}
.imgContainer img.close{
width: .26rem;
height: .26rem;
top: -.1rem;
right: -.1rem;
position: absolute;
z-index: 20;
}
.input_img{
width: 1.2rem;
height: 1.2rem;
opacity: 0;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
//获取图片地址
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // web_kit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
//图片转成base64后压缩
function convertImgToBase64(url, callback, outputFormat){
//创建canvas画布
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
//创建img对象
var img = new Image;
img.crossOrigin = 'Anonymous';
//图片加载
img.onload = function(){
var width = img.width;
var height = img.height;
// 按比例压缩4倍
var rate = (width<height ? width/height :height/width)/4;
//设置画布的width和height
canvas.width = width*rate;
canvas.height = height*rate;
//绘制图片
ctx.drawImage(img,0,0,width,height,0,0,width*rate,height*rate);
//压缩
var dataURL = canvas.toDataURL(outputFormat || 'image/png');
//转指向，返回值
callback.call(this, dataURL);
//清除画布
canvas = null;
};
img.src = url;
}
//点击上传图片事件
$(".input_img").bind("change",function(e){
//获取图片信息
file = event.target.files[0];
// 选择的文件是图片
if (file.type.indexOf("image") == 0) {
var imageUrl = getObjectURL(file)
convertImgToBase64(imageUrl, function(base64Img){
$("#imgBox").show()
var s=$("#imgBox").html()
s+='' $("#imgBox").html(s)
var len=$(".imgContainer").length
if(len>=1){
$(".upImg").hide()
}else{
$(".upImg").css("display","block")
}
$(".close").click(function(){
var ind=$(this).parent().index()
$(".imgContainer").eq(ind).remove()
$("#imgBox").hide()
$(".upImg").show()
})
var datas={ "FileData":base64Img }
$.ajax({
type:"post",
//url后是后端给的地址
url:"*****",
async:true,
dataType:"json",
data:datas,
success:function(res){
if(res.filepath !=""){
$(".imgContainer").eq(0).attr("path",res.filepath)
}else{
showInfo("请重新上传图片")
}
}
});
})
}else{
showInfo("请上传图片")
}
})
网友评论