h5图片上传

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5页面如何在手机端浏览器调用相机、相册功能</title>
</head>
<body>

<div>

<div class="imgs clear">
<div class="img fl hide"></div>
<div class="add fl">111</div>
<input type="file" class="hide" id="upimg3" accept="image/*">
</div>
</div>
<script src="./jquery-1.8.0.min.js"></script>
<script>
//图片预览
$('.add' ).on('click',function(){
var this_ = $(this );
var ua = navigator.userAgent.toLowerCase();
var isiOS = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1); // ios终端
if(!isiOS){
this_.next("input").attr('capture','camera');
}
this_.next("input").fadeOut();
// 这里是为了能够多次选定同一张图片
this_.after('<input type="file" class="hide" id="upimg4" accept="image/*">');
var imglen = this_.parent(".imgs").children('.img').children("img").length;
this_.next("input").click().off("change").on('change',function(){
var size = (this_.next("input")[0].files[0].size / 1024).toFixed(2);
if(size <= 5120){
var img = this_.next("input")[0].files[0];
var formData = new FormData();
formData.append("picture",img);
uploadPic(formData,this_,imglen);
} else {
swal({
title: ' ',
text: '您的图片超过5M',
type: 'warning',
showConfirmButton:false,
timer:1500
});
}
});
});

function imgresize(){
setTimeout(function(){
var img = $('.img>img' );
img.each(function(){
$(this).height('20.8vw');
$(this).width('20.8vw');
});
},100);
}

var uploadPic = function(formData,this_,imglen){
$.ajax({
type:"post",
url:"{:Url('File/uploadPicture')}",
data:formData,
cache: false,
processData : false,
contentType : false,
beforeSend: function(XMLHttpRequest){
$('.swal2-confirm' ).css({'background-color':'#c1c1c1','border-left-color':'#c1c1c1','border-right-color':'#c1c1c1'})
},
success:function(data){
alert(data+":75")
if(imglen >= 3){
this_.hide();
}
swal.close();
var msg = $.parseJSON(data);
if(msg.code == 1){
if(this_.hasClass('add')){
//图片添加
this_.parent('.imgs').children(".img").eq(imglen).removeClass('hide' )
.append('<img src='+msg.data.path+' alt="图片" data-tab='+msg.data.id+'><span><img src="/home/images/common/default.png" alt=""></span>');

// 删除图片
$(".img span").on("click", function () {
$(this).parent(".img").remove();
this_.fadeIn();
this_.before('<div class="img fl hide"></div>');
});

// 图片点击修改
/*$(".img>img").on("click", function () {
$(this).parent(".img").remove();
this_.fadeIn().click();
this_.before('<div class="img fl hide"></div>');
});*/
}else{
//图片修改
this_.find('img').remove();
this_.append('<img src='+msg.data.path+' alt="图片" data-tab='+msg.data.id+'>');
}
imgresize();

} else {
return '';
}
},
error:function(data){
alert(JSON.stringify(data)+":112");
}
});
}
</script>
</body>
</html>

猜你喜欢