h5圖片上傳
阿新 • • 發佈：2019-01-18
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5頁面如何在手機端瀏覽器呼叫相機、相簿功能</title>
</head>
<body>
<div>
<!-- <input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone"> -->
<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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5頁面如何在手機端瀏覽器呼叫相機、相簿功能</title>
</head>
<body>
<div>
<!-- <input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone"> -->
<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>