移动端简单图片上传图片大小限制获取base64

最新推荐文章于 2024-04-02 17:28:09 发布

时间在飞飞

最新推荐文章于 2024-04-02 17:28:09 发布

阅读量640

点赞数

分类专栏：前端 js 文章标签：前端图片上传 js移动端图片上传移动端上传图片

本文链接：https://blog.csdn.net/zhanghuanhuan1/article/details/109111200

版权

前端同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

18 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title data-locale="purchaseTitle">好评活动</title>
    <link rel="stylesheet" href="css/common_rem.min.css">
    <link rel="stylesheet" href="css/style.css">
    <style>
       body{background:#F4F4F4;}
        p{
            padding:0;
        }
        .noti-big-box{
            box-shadow:0px 0px 19px 0px rgba(149,149,150,0.15);
            border-radius:0.2rem;
            padding:0.48rem 0.47rem 0.58rem;
            background:#fff;
        }

        .noti-big-box .prise-img-001{
            display:block;
            margin:0 auto 0.2rem;
            width:3rem;
        }
        .noti-title-box h4{
            color:#222;
            font-size:0.34rem;
            text-align: center;
            padding-bottom:0.27rem;
        }

        .noti-title-box p{
            color:#888;
            font-size:0.26rem;
            line-height:0.39rem;
        }
        .noti-body-box{
            width:100%;
            background:rgba(231,244,255,1);
            border-radius:0.14rem;
            padding:0.46rem 0.32rem;
            box-sizing: border-box;
        }

        .noti-body-box img{
            width:100%;
        }
        .noti-body-box{
            word-wrap: break-word;
        }
        
        .obj-title{
            font-size:0.3rem;
            color: #222;
            padding-top:0.49rem;
            margin-bottom:0.32rem;
        }

        .input-order-number{
            display:block;
            box-sizing: border-box;
            width:100%;
            height: 0.9rem;
            color: #888888;
            font-size:0.28rem;
            border-radius: 0.2rem;
            padding-left:0.28rem;
        }

        button{
            display:block;
            width:100%;
            background:#222;
            color:#fff;
            font-size:0.28rem;
            height: 0.8rem;
            border:none;
        }
        .imgUploadList{
            display:flex;
            padding-bottom:0.59rem;
        }
        .imgUploadList .img-upload-item{
            width:1.8rem;
            height: 1.8rem;
            background:url('images/praise_002.png');
            background-repeat: no-repeat;
            background-size: contain;
        }

        .file-class{
            width:100%;
            height:100%;
            opacity: 0;
        }
    </style>
</head>

<body>
    <div class="wrap">
        
        <div class="noti-big-box">
            <div class="noti-title-box">
                <img class="prise-img-001" src="images/praise_001.png" alt="">

                <h4 >留好评,领福利</h4>

                <p>尊敬的用户,自2020年10月01日起,凡在Amazon下单的用户,留下四星好评,并在APP提交Amazon订单号和好评截图,即可领取50元优惠券.您的好评,是我们最大的追求!</p>
            </div>

        </div>

        <h3 class="obj-title">Amazon订单号</h3>

        <input class="input-order-number" type="text" >
        
        <div class="order-number-err" style="height:0;color:red;font-size:0.26rem;box-sizing: border-box;"></div>

        <h3 class="obj-title">评价截图</h3>

        <div class="imgUploadList">

            <div class="img-upload-item">
           
                <input class="file-class" onchange="handleFiles(this,'bg_card1','positive')" accept="image/*" type="file"/>
            </div>
            
        </div>
         
        
        <button>立即提交</button>
    </div>


    <script src="js/jquery.min.js"></script>

        <script>

        orderNumberErr ('*请输入正确的订单号')
        function orderNumberErr (err_text){
            $('.order-number-err').css('paddingTop','0.27rem').text(err_text)
        }

        function handleFiles(obj,id){
           
            console.log('input上传')
            getImgByteSize(obj)

            getImgBase64(obj,function(imgUrl){
               
                $(obj).parent().css("background-image","url("+imgUrl[0]+")")
                console.log('base64数组',imgUrl)

            })
            
        }
         
        function getImgByteSize(file) {
            var fileSize = 0;
            var fileMaxSize = 1024;//1M
            var filePath = file.value;
            if(filePath){
                fileSize =file.files[0].size;
                var size = fileSize / 1024;

                console.log('fileSize',fileSize)
                if (size > fileMaxSize) {
                    alert("文件大小不能大于1M！");
                    file.value = "";
                    return false;
                }else if (size <= 0) {
                    alert("文件大小不能为0M！");
                    file.value = "";
                    return false;
                }
            }else{
                return false;
            }
        }
        // input 单图、多图. 返回base64 数组
        function getImgBase64(obj, callback) {
            var files = obj.files.length
            var filesArr = []
            for (var i = 0; i < files; i++) {
                var reader = new FileReader();
                reader.readAsDataURL(obj.files[i]);
                reader.onload = function(e) {
                    filesArr.push(this.result)
                    if (files == filesArr.length) {
                        console.log(i, files)
                        callback(filesArr)
                    }
                }
         
            }
        }

    </script>
</body>

</html>

时间在飞飞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
移动端简单图片上传图片大小限制获取base64

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <titl...
复制链接

扫一扫