Implementation method of javascript image upload preview (source code attached)

This article brings you a detailed explanation of PHP synergy implementation (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Hello, everyone, the game has started. Welcome everyone to watch this explanation. The content this time is the upload preview of the image. Finally send the source code link.

Without further ado, let’s start with the picture.

Image to be uploaded

Click inside the blue box and you can select the file on the PC. On the mobile terminal, you can choose to take a photo or select a picture to upload. .

HTML part

<div>
    <div>
        <div>
            <img  alt="Implementation method of javascript image upload preview (source code attached)" >
            <div>请点击</div>
            <img  alt="Implementation method of javascript image upload preview (source code attached)" >
        </div>
        <div></div>
        <input>
    </div>
</div>

.default-box This layer is the plus sign image
up-img is where the image is displayed after transcoding.
The input below is where you select the image.

css

        .img-box {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .card-box {
            width: 7.5rem;
            height: 4rem;
            border: solid .04rem #23a7fe;
            border-radius: 4px;
            box-sizing: border-box;
            position: relative;
        }
        .upImg-btn {
            width: 100%;
            height: 100%;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
        }
        .up-img {
            width: 5.58rem;
            height: 3.12rem;
            margin: .2rem .6rem;
            position: absolute;
            top: .2rem;
            left: 0;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover
        }
        .default-box {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
        .add-img {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -.64rem;
            margin-top: -.64rem;
            width: 1.28rem;
            height: 1.28rem;
        }
        .default-img {
            position: absolute;
            padding: 0 1.1rem;
            bottom: .68rem;
            box-sizing: border-box;
            width: 100%;
            opacity: .5;
        }
        .default-title {
            position: absolute;
            width: 100%;
            bottom: .12rem;
            text-align: center;
            color: #23a7fe;
            font-size: .32rem;
        }

The inside is the positioning.

Page js

    document.querySelector("#addImg").addEventListener("change",function () {
        changeImg({
            id:"addImg",           //input的Id   必须
            imgBox:'upImg',        //显示位置Id   必须
            limitType:['jpg','png','jpeg'],   //支持的类型   必须
            limitSize:819200          //图片超过多大开始进行压缩    可不传
        });
    });

We monitor the change time of the input, and then pass in the parameter dShowImg64.js code

     //id,limitType,limitSize
    function changeImg(obj = {}) {                          
        if(!obj.id) return;
        if(!obj.limitType)return;
        var dom = document.querySelector("#"+obj.imgBox);
        var files =  document.querySelector("#"+obj.id).files[0];
        var reader = new FileReader();
        var type = files.type && files.type.split('/')[1];           //文件的类型，判断是否是图片
        var size = files.size;         //文件的大小，判断图片的大小
        if (obj.limitType.indexOf(type) == -1) {
            alert('不符合上传要求');
            return;
        }
        //判断是否传入限制大小。压不压缩。
        var limitSize = obj.limitSize ? parseInt(obj.limitSize) : 0;
        if (size <p>First obtain various attributes such as type and size<br>Judge Check whether the image is smaller than the limit size. If it is smaller, directly convert it to base64. If it is larger, use canvas to reduce it, complete the compression, then convert it to base64, and then set the obtained value as the background image. Then hide the add style. </p><p style="text-align: center;"><span class="img-wrap"><img src="https://img.php.cn//upload/image/407/191/539/1540188541275097.png" title="1540188541275097.png" alt="Implementation method of javascript image upload preview (source code attached)"></span><br>Last preview image</p><p>git address:<a href="https://github.com/Zhoujiando...">https://github.com/Zhoujiando...</a><br></p><p>More small plug-ins will be added in the future. Finally, I wish you all good health, thank you. </p><p class="comments-box-content"></p>

The above is the detailed content of Implementation method of javascript image upload preview (source code attached). For more information, please follow other related articles on the PHP Chinese website!