原文連接
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>好了。希望對大家有點小幫助
)
