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

原文连接

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>

好了。希望对大家有点小帮助