原文連接

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>

好了。希望對大家有點小幫助

總結

以上是生活随笔為你收集整理的手机端本地图片或者拍照的上传功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。