原文连接
https://blog.csdn.net/m0_37852904/article/details/78550136
----------------------------------------------------------
最近刚好在做手机端的图片上传功能，便记录下
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); // ios终端
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);
// 这里设置5m以内
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); // 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>好了。希望对大家有点小帮助
)
