HTMLベースの複数画像アップロードのプレビュー機能を実装

最近、Web ページに複数の画像をアップロードするためのスクリプトを作成しました。これは非常に実用的だと思います。詳細には触れず、コードだけを投稿します。

 <ヘッド>
<スタイル>
.pro_img{ margin-left:10px;margin-top:10px;width:300px;height: 300px;background-color: black; --border-radius:999em; overflow:hidden;float:left; --margin:5% 35%;position: relative;}
.pro_img img{ 位置: absolute; 左: 50%; 上: 50%; 変換: translate(-50%,-50%); 幅: 100%
}
.pro_img {位置:相対}
.pro_img 入力{位置: 絶対;幅: 100%;高さ: 100%;余白: 0;不透明度: 0;z-index: 100;}
</スタイル>
<script type="text/javascript" src="jquery.min.js"></script>
<スクリプト>
名前_pic=1;
関数 t1(o){
//アラート(name_pic);
    if(o==1 || name_pic!=1){
    var file="ファイル"+o;
    var img="img"+o;
    var hid="hidden"+o;
    var aa="a"+o;
    }それ以外{
    var file="ファイル"+name_pic;
    var img="画像"+name_pic;
    var hid="hidden"+name_pic;
    var aa="a"+name_pic;
    }
    var docObj = document.getElementById(ファイル);
    var imgObjPreview = document.getElementById(img);
    var hidden = document.getElementById(hid);
    // アラート(非表示);
    docObj.files が docObj.files[0] の場合
        hidden.src=window.URL.createObjectURL(docObj.files[0]); //ファイルのパスを取得しますhidden.onload=function(){
            var width=hidden.width;
            var height=hidden.height;
            var a = document.getElementById(aa);
                幅>高さの場合{
                imgObjPreview.style.cssText='width:100%'; //CSSスタイルを書き換える}else{
                imgObjPreview.style.cssText='高さ:100%;幅:自動;';                  
                }
        imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
        imgObjPreview.style.display = 'ブロック';
        }
    }それ以外{
        false を返します。
    }
    if(o==name_pic){
        var count=$('.pro_img').length;
        カウント<6の場合{
        名前_pic++;
    var pic_div="<a class='pro_img' id='a"+name_pic+"' ><input type='file' id='file"+name_pic+"' accept='image/*' multiple='multiple' name='pic[]' onchange='t1("+name_pic+")'/><img src='upload.jpg' id='img"+name_pic+"'></a><img id='hidden"+name_pic+"' style='display:none;'>";
    $('#upload').append(pic_div); 
    }       
}
}
</スクリプト>
</head>
<!-- multiple='複数' -->
<form action="upload/2022/web/><img src='upload.jpg' id='img1'></a>
<img id='hidden1' style='display:none;'>
</div>
<input type='submit' value="アップロード" />
</フォーム>

upload.png画像を自分で置き換えることでニーズを満たすことができます。画像をクリックしても反応しない場合は、jqueryを追加することを忘れないでください。

以上が、HTML ベースの複数画像アップロードプレビュー機能についてご紹介した内容です。お役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、すぐに返信させていただきます。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<: vue+elementui+vuex+sessionStorage を使用して履歴タグメニューを実装するためのサンプルコード

>>: IE10 のパスワードクリアテキスト表示とクイッククリア機能を無効にする方法