JavaScript画像アップロードプレビューの実装方法（ソースコード添付）

この記事では、PHP シナジーの実装について詳しく説明します (コード付き)。必要な方は参考にしていただければ幸いです。

皆さん、ゲームが始まりました。ようこそこの説明をご覧ください。今回の内容は画像のアップロードプレビューです。最後にソースコードのリンクを送信します。

早速、写真から始めましょう。

アップロードする画像

青いボックス内をクリックして、PC およびモバイル デバイス上のファイルを選択します。写真を撮るか、アップロードする写真を選択することができます。

HTML 部分

<div>
    <div>
        <div>
            <img  alt="JavaScript画像アップロードプレビューの実装方法（ソースコード添付）" >
            <div>请点击</div>
            <img  alt="JavaScript画像アップロードプレビューの実装方法（ソースコード添付）" >
        </div>
        <div></div>
        <input>
    </div>
</div>

.default-box このレイヤーはプラス記号の画像です
up-img はトランスコード後に画像が表示される場所です。
以下の入力は画像を選択する場所です。

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

内側は位置決めです。

Page js

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

入力の変更時間を監視し、パラメータ 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に変換して設定します。取得した値を背景画像として使用します。次に、追加スタイルを非表示にします。 </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>git アドレス:<p>https://github.com/Zhoujiando...<a href="https://github.com/Zhoujiando..."></a><br></p>今後さらに小さなプラグインが追加される予定です。最後に、皆様のご健康を心よりお祈り申し上げます、ありがとうございました。 <p></p><p class="comments-box-content"></p>

以上がJavaScript画像アップロードプレビューの実装方法（ソースコード添付）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。