Implementing the preview function of multiple image uploads based on HTML

I recently wrote a script for uploading multiple images to a web page. I think it is quite practical. I won’t go into details and will just post the code.

 <head>
<style>
.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{ position: absolute;left: 50%;top:50%; transform: translate(-50%,-50%);width: 100%
}
.pro_img {position:relative}
.pro_img input{position: absolute;width: 100%;height: 100%;margin:0;opacity:0;z-index: 100;}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
name_pic=1;
function t1(o){
//alert(name_pic);
    if(o==1 || name_pic!=1){
    var file="file"+o;
    var img="img"+o;
    var hid="hidden"+o;
    var aa="a"+o;
    }else{
    var file="file"+name_pic;
    var img="img"+name_pic;
    var hid="hidden"+name_pic;
    var aa="a"+name_pic;
    }
    var docObj = document.getElementById(file);
    var imgObjPreview = document.getElementById(img);
    var hidden = document.getElementById(hid);
    // alert(hidden);
    if (docObj.files && docObj.files[0]) {
        hidden.src=window.URL.createObjectURL(docObj.files[0]); //Get the path of the file hidden.onload=function(){
            var width=hidden.width;
            var height=hidden.height;
            var a=document.getElementById(aa);
                if(width>height){
                imgObjPreview.style.cssText='width:100%'; //Rewrite css style}else{
                imgObjPreview.style.cssText='height:100%;width:auto;';                  
                }
        imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
        imgObjPreview.style.display = 'block';
        }
    }else{
        return false;
    }
    if(o==name_pic){
        var count=$('.pro_img').length;
        if(count<6){
        name_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); 
    }       
}
}
</script>
</head>
<!-- multiple='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" />
</form>

You can meet your needs by replacing some upload.png images yourself. If the image click does not respond, don't forget to add jquery

The above is what I introduced to you about the HTML-based multi-image upload preview function. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!

<<: Sample code for implementing the history tag menu using vue+elementui+vuex+sessionStorage

>>: How to disable IE10's password clear text display and quick clear function

Detailed explanation of React component communication

Implementing the preview function of multiple image uploads based on HTML

Detailed explanation of React component communication

Docker Gitlab+Jenkins+Harbor builds a persistent platform operation

Detailed explanation of loop usage in javascript examples

Vue uses calculated properties to complete the production of dynamic sliders

JavaScript Advanced Programming: Variables and Scope

30 excellent examples of color matching in web design

mysql show simple operation example

JavaScript to achieve click image flip effect

Notes on element's form components

Implementation of HTML sliding floating ball menu effect

Recommend

Implementation of forced line breaks and non-line breaks in div, td, p and other containers in HTML

A brief analysis of the matching priority of Nginx configuration location

IDEA configuration process of Docker

Detailed explanation of common methods of Vue development

Some common properties of CSS

Three.js realizes Facebook Metaverse 3D dynamic logo effect

Analysis of Linux boot system methods

Detailed explanation of several clever applications of position:sticky sticky positioning

Summary of common MySQL table design errors

Optimization methods when Mysql occupies too high CPU (must read)

How to install Tomcat-8.5.39 on centos7.6

10 bad habits to avoid in Docker container applications

Some problems you may encounter when installing MySQL

Tomcat security specifications (tomcat security reinforcement and specifications)

Div nested html without iframe