<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 ;
}
//圖片轉(zhuǎn)成base64后壓縮
function convertImgToBase64(url, callback, outputFormat){
//創(chuàng)建canvas畫布
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
//創(chuàng)建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;
//設(shè)置畫布的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');
//轉(zhuǎn)指向，返回值
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("請上傳圖片")
}
})
