手机端实现本地图片上传或者拍照上传功能

admin · 发表于 2024-5-25 20:03:17

最新正好在做一个手机端传图的功能，正好把过程记录下来了，下面是正文：

<input type="file" class="hide" id="upimg4" accept="image/*">

复制代码

这行input代码是html端上传图片的输入框，注意accept最好写成这种*泛模式，不要使用指定模式。
我们需要做一个JS来判断是安卓系统还是IOS系统，因为初始调用经过测试只有苹果系统可以调用出手机拍照的功能，所以为了两种机型能够保持一致，我们就需要在安卓系统中增加手机拍照上传的功能。

var ua = navigator.userAgent.toLowerCase();
var isiOS = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1); // ios终端
if(!isiOS){
$("input").attr('capture','camera');
}

复制代码

手机端请求本地文件的JS代码如下：

<script>
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));
}
});
}
</script>

复制代码

上传图片，我们还需要控制上传图片的大小，代码如下：

var size = ($("input")[0].files[0].size / 1024).toFixed(2);
// 这里设置5m以内
if(size <= 5120){
var img = $("input")[0].files[0];
var formData = new FormData();
formData.append("picture",img);
uploadPic(formData,this_,imglen);
} else {
}

复制代码

下面是完整的JS代码部分：

//图片预览
$('.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)
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));
}
});
}

复制代码

下面是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>

复制代码

好了，希望对大家有所帮助。