Implementierung der Vorschaufunktion mehrerer Bild-Uploads auf HTML-Basis

 <Kopf>
<Stil>
.pro_img{ Rand links: 10px; Rand oben: 10px; Breite: 300px; Höhe: 300px; Hintergrundfarbe: schwarz; --border-radius: 999em; Überlauf: ausgeblendet; Float: links; --margin: 5 % 35 %; Position: relativ;}
.pro_img img{ Position: absolut; links: 50 %; oben: 50 %; transformieren: übersetzen (-50 %, -50 %); Breite: 100 %
}
.pro_img {position:relative}
.pro_img input{Position: absolut;Breite: 100%;Höhe: 100%;Rand:0;Deckkraft:0;Z-Index: 100;}
</Stil>
<script type="text/javascript" src="jquery.min.js"></script>
<Skript>
Name_Bild=1;
Funktion t1(o){
//Alarm(Name_Bild);
    wenn(o==1 || name_pic!=1){
    var file="Datei"+o;
    var img="img"+o;
    var hid="versteckt"+o;
    var aa="a"+o;
    }anders{
    var file="Datei"+Name_Bild;
    var img="img"+name_bild;
    var hid="versteckt"+name_pic;
    var aa="a"+name_bild;
    }
    var docObj = document.getElementById(Datei);
    var imgObjPreview = document.getElementById(img);
    var hidden = document.getElementById(hid);
    // Alarm (versteckt);
    wenn (docObj.files && docObj.files[0]) {
        hidden.src=window.URL.createObjectURL(docObj.files[0]); //Pfad der Datei abrufen hidden.onload=function(){
            var Breite=versteckte.Breite;
            var Höhe = versteckte Höhe;
            var a=document.getElementById(aa);
                wenn(Breite>Höhe){
                imgObjPreview.style.cssText='width:100%'; //CSS-Stil neu schreiben}else{
                imgObjPreview.style.cssText='Höhe: 100 %; Breite: auto;';                  
                }
        imgObjPreview.src = Fenster.URL.createObjectURL(docObj.files[0]);
        imgObjPreview.style.display = "Block";
        }
    }anders{
        gibt false zurück;
    }
    wenn(o==Name_Bild){
        var Anzahl=$('.pro_img').Länge;
        wenn(Anzahl<6){
        Name_Bild++;
    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;'>";
    $('#hochladen').anhängen(pic_div); 
    }       
}
}
</Skript>
</Kopf>
<!-- mehrere='mehrere' -->
<form action="upload/2022/web/><img src='upload.jpg' id='img1'></a>
<Bild-ID='hidden1' Stil='Anzeige: keine;'>
</div>
<input type='submit' value="Hochladen" />
</form>