javascript圖片上傳預覽的實作方法（附原始碼）

這篇文章帶給大家的內容是關於php協成實現的詳解（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

hello，大家好，遊戲開始了，歡迎大家收看這一期的講解。本次的內容是圖片的上傳預覽。最後發源碼連結。

廢話不多說，先上圖。

 待上傳圖片

#點擊藍色方塊內，pc可以選擇文件，行動裝置選擇拍照或選擇圖片進行上傳。

HTML部分

<div>
    <div>
        <div>
            <img  alt="javascript圖片上傳預覽的實作方法（附原始碼）" >
            <div>请点击</div>
            <img  alt="javascript圖片上傳預覽的實作方法（附原始碼）" >
        </div>
        <div></div>
        <input>
    </div>
</div>

.default-box這層就是加號圖片
up-img是轉碼後顯示影像的地方。
下面input是選擇圖片的地方。

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;
        }

內部就是定位了。

頁面js

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

我們監聽input的change時間，然後傳入參數dShowImg64.js程式碼

     //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>先取得各種屬性如類型、大小<br>判斷圖片是否小於限制大小、小於的話直接轉base64，大於的話利用canvas 進行縮小完成壓縮後轉base64 然後將得到的值設為背景圖。然後隱藏add的樣式。 </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="javascript圖片上傳預覽的實作方法（附原始碼）"></span><br>最後的預覽圖片</p><p>git位址：<a href="https://github.com/Zhoujiando...">https://github.com/Zhoujiando...</a><br></p><p>以後會再加入更多的小外掛。最後祝大家身體健康，謝謝。 </p><p class="comments-box-content"></p>#

以上是javascript圖片上傳預覽的實作方法（附原始碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！