html+css+js to realize the function of photo preview and upload picture

Preface: When we are making web pages, we often need to upload pictures, which may be to select pictures or take photos to upload. Although the simple use of <input type="file"/> can also achieve the function, the user experience may be a bit worse. Therefore, this article records the use of css+js to achieve the preview and compression upload functions after the picture is selected. Some of them come from the Internet and are recorded and sorted here.

Effect preview:

1. Create index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>Photo Upload</title>
        <link rel="stylesheet" href="index.css"/>
        <script type='text/javascript' src='index.js' charset='utf-8'></script>
    </head>
    <body>
         <form id="mainForm">
            <div class="content">
                <div class="label">ID card</div>
                <div class="img-area">
                    <div class="container">
                        <input type="file" id='id-face' name='face' accept="image/*" />
                        <div id='face-empty-result'>
                            <img style='width:4rem' src="https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true" alt="">
                            <p>Front photo of ID card</p>
                        </div>
                        <img style='width: 100%' id='face-result'/>
                    </div>
                    <div class="container" style='margin-top:0.5rem;'>
                        <input type="file" id='id-back' name='back' accept="image/*" />
                        <div id='back-empty-result'>
                            <img style='width:4rem' src="https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true" alt="">
                            <p>Photo of the back of your ID card</p>
                        </div>
                        <img style='width: 100%' id='back-result'/>
                    </div>
                </div>
            </div>
            <div class="btn">
                Submit</div>
         </form>
    </body>
</html>

2. Create index.css

body{
    margin: 0
}
.content{
    padding:0.5rem;
    display: flex;
    align-items: center;
    border-bottom: 1px #999 solid
}
.label{
    width:5rem;
}
.img-area{
    flex:1
}
.container{
    background-color:#e7e7e7;
    position: relative;
}
.container div{
    text-align: center;
    padding:0.5rem 0
}
.container input{
    opacity:0;
    filter:alpha(opacity=0);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
}
.container p{
    font-size: 0.9rem;
    color:#999
}
.btn{
    background-color: #4363ab;
    color: #fff;
    text-align: center;
    padding: 0.5rem 1rem;
    width:80%;
    border-radius: 0.2rem;
    margin: 2rem auto;
    font-weight: 600;
    font-size: 1.2rem
}

3. Create index.js

window.onload = function(){
    document.getElementById("id-face").addEventListener("change", function(){       
        onFileChange(this,"face-result","face-empty-result")
    });
    document.getElementById("id-back").addEventListener("change", function(){       
        onFileChange(this,"back-result","back-empty-result")
    });
    document.getElementsByClassName("btn")[0].addEventListener("click", function(){       
        submit();
    });
};
/**
 * Processing when an image is selected* @param {*} fileObj input file element* @param {*} el //The element ID used to display the image after selection
 * @param {*} btnel //Button area ID displayed when the image is not selected
 */
function onFileChange(fileObj,el,btnel){
    var windowURL = window.URL || window.webkitURL;
    var dataURL;
    var imgObj = document.getElementById(el);
    document.getElementById(btnel).style.display="none";
    imgObj.style.display="block";
    if (fileObj && fileObj.files && fileObj.files[0]) {
        dataURL = windowURL.createObjectURL(fileObj.files[0]);
        imgObj.src=dataURL;
    } else {
        dataURL = fileObj.value;
        imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
        imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
    }
}
/**
 * Compress the image and return the data in base64 format* @param {*} image img element* @param {*} width width of the compressed image* @param {*} height height of the compressed image* @param {*} qua //Image quality 1-100
 */
function compressImageTobase64(image,width,height,qua){
    var quality = qua ? qua / 100 : 0.8;
    var canvas = document.createElement("canvas"),     
        ctx = canvas.getContext('2d');     
    var w = image.naturalWidth,     
        h = image.naturalHeight;     
    canvas.width = width||w;     
    canvas.height = height||h;     
    ctx.drawImage(image, 0, 0, w, h, 0, 0, width||w, height||h);
    var data = canvas.toDataURL("image/jpeg", quality);     
    return data;
}
//Submit function submit(){
    //1. Form submission//document.getElementById("mainForm").submit();
    //2. Ajax submission after compression var face_data=compressImageTobase64(document.getElementById("face-result"),200,100,90);
    var back_data=compressImageTobase64(document.getElementById("back-result"),200,100,90);
    var formData = new FormData();  
    formData.append("face",face_data);
    formData.append("back",back_data);
    //Need to introduce jQuery
    $.ajax({
        url:"/address",
        type: 'POST',
        cache: false,
        data: formData,
        timeout:180000,
        processData: false,
        contentType: false,
        success:function(r){
        },
        error:function(r){  
        }
   });
}

Source code: Github address

Summarize

The above is the html+css+js that I introduced to you to realize the photo preview and upload picture 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!

<<: Solve the problem of specifying udp port number in docker

>>: Detailed analysis of several situations in which MySQL indexes fail

A detailed introduction to deploying RabbitMQ environment with docker

Installing Alibaba Cloud Server with Docker and the pitfalls encountered in installing it in a virtual machine (summary of problems)

Docker installation (Alibaba Cloud Server) Docker...

html+css+js to realize the function of photo preview and upload picture

A detailed introduction to deploying RabbitMQ environment with docker

js implements a simple method of encapsulating jQuery and a detailed explanation of chain operations

Discussion on default margin and padding values of common elements

Let's deeply understand the event object in js

Detailed tutorial for installing mysql 8.0.12 under Windows

Linux uses if to determine whether a directory exists.

Detailed explanation of redis persistence, master-slave synchronization and sentinel under Linux

js implements some functions of the input component in Element and encapsulates it into a component (example code)

HTML+VUE paging to achieve cool IoT large screen function

JavaScript implements AI tic-tac-toe game through the maximum and minimum algorithm

Recommend

Analysis of how to create a stored procedure in MySQL to add new fields to a data table

Detailed description of the life cycle of React components

The most detailed method to install docker on CentOS 8

Implementation of HTML sliding floating ball menu effect

Example of using UserMap in IMG

Installing Alibaba Cloud Server with Docker and the pitfalls encountered in installing it in a virtual machine (summary of problems)

Solution to the error when importing MySQL big data in Navicat

Detailed explanation of client configuration for vue3+electron12+dll development

XHTML language default CSS style

Web design reference firefox default style

Sample code for implementing honeycomb/hexagonal atlas with CSS

Resolving MySQL implicit conversion issues

How to solve the problem that the software package does not exist when installing software in Linux

Quickly learn MySQL basics

Example operation MySQL short link