最近刚好在做手机端的图片上传功能,便记录下
html:
<input type="file" class="hide" id="upimg4" accept="image/*">
注意:accept最好是写成这样,不要用枚举法的形式
js:
先判断是否为android系统还是ios系统,因为初始调用时只有ios系统可以调用出手机的拍照功能,所以为了两种机型能够保持一致,所以我们就需要在android系统下增加手机的拍照效果
var ua = navigator.userAgent.toLowerCase();
var isiOS = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
if(!isiOS){
$("input").attr('capture','camera');
}
请求本地文件
var uploadPic = function(formData,this_,imglen){
$.ajax({
type:"post",
url:"{:Url('File/uploadPicture')}",
data:formData,
cache: false,
processData : false,
contentType : false,
beforeSend: function(XMLHttpRequest){
},
success:function(data){
alert(data);
},
error:function(data){ alert(JSON.stringify(data));
}
});
}
设置图片的大小
var size = ($("input")[0].files[0].size / 1024).toFixed(2);
if(size <= 5120){
var img = $("input")[0].files[0];
var formData = new FormData();
formData.append("picture",img);
uploadPic(formData,this_,imglen);
} else {
}
下面来个完整代码
$('.add' ).on('click',function(){
var this_ = $(this );
var ua = navigator.userAgent.toLowerCase();
var isiOS = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
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)
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>');
});
}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));
}
});
}
html:
<div class="imgs clear">
<div class="img fl hide"></div>
<div class="add fl"></div>
<input type="file" class="hide" id="upimg3" accept="image/*">
</div>
好了。希望对大家有点小帮助