Maison > Article > interface Web > html+css+js implémente l'aperçu des photos et le partage d'exemples de fonctions de téléchargement d'images

html+css+js implémente l'aperçu des photos et le partage d'exemples de fonctions de téléchargement d'images

小云云original: 2018-01-16 16:41:453594parcourir

Lorsque nous créons des pages Web, nous devons souvent télécharger des images. Nous pouvons choisir des images ou prendre des photos à télécharger si nous utilisons simplement

<input type="file"/>

, bien que cette méthode puisse également réaliser la fonction, il a une expérience utilisateur Cela peut être un peu différent, c'est pourquoi cet article enregistre l'utilisation de css+js pour implémenter les fonctions de prévisualisation et de téléchargement compressé après la sélection de l'image. Certaines informations proviennent d'Internet et sont enregistrées et organisées. ici.

Aperçu de l'effet :

1. Créer 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>拍照上传</title>
        <link rel="stylesheet" href="index.css"/>
        <script type=&#39;text/javascript&#39; src=&#39;index.js&#39; charset=&#39;utf-8&#39;></script>
    </head>
    <body>
         <form id="mainForm">
            <p class="content">
                <p class="label">身份证</p>
                <p class="img-area">
                    <p class="container">
                        <input type="file" id=&#39;id-face&#39; name=&#39;face&#39;  accept="image/*" />
                        <p id=&#39;face-empty-result&#39;>
                            <img style=&#39;width:4rem&#39; src="https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true" alt="">
                            <p>身份证正面照</p>
                        </p>
                        <img style=&#39;width: 100%&#39; id=&#39;face-result&#39;/>
                    </p>
                    <p class="container" style=&#39;margin-top:0.5rem;&#39;>
                        <input type="file" id=&#39;id-back&#39; name=&#39;back&#39; accept="image/*" />
                        <p id=&#39;back-empty-result&#39;>
                            <img style=&#39;width:4rem&#39; src="https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true" alt="">
                            <p>身份证反面照</p>
                        </p>
                        <img style=&#39;width: 100%&#39; id=&#39;back-result&#39;/>
                    </p>
                </p>
            </p>
            <p class="btn">
                提交
            </p>
         </form>
    </body>
</html>

2. Créer 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 p{
    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. Créer 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();
    });
};
/**
 * 选中图片时的处理
 * @param {*} fileObj input file元素
 * @param {*} el //选中后用于显示图片的元素ID
 * @param {*} btnel //未选中图片时显示的按钮区域ID
 */
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;
    }
}
/**
 * 将图片压缩后返回base64格式的数据
 * @param {*} image img元素
 * @param {*} width 压缩后图片宽度
 * @param {*} height 压缩后图片高度
 * @param {*} qua //图片质量1-100
 */
function compressImageTobase64(image,width,height,qua){
    var quality = qua ? qua / 100 : 0.8;
    var canvas = document.createElement("canvas"),     
        ctx = canvas.getContext(&#39;2d&#39;);     
    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;
}
//提交
function submit(){
    //1、form提交
    //document.getElementById("mainForm").submit();
    //2、压缩后ajax提交
    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);
    //需引入jQuery
    $.ajax({
        url:"/地址",
        type: &#39;POST&#39;,
        cache: false,
        data: formData,
        timeout:180000,
        processData: false,
        contentType: false,
        success:function(r){
        },
        error:function(r){  
        }
   });
}

Recommandations associées :

Tutoriel sur la façon d'utiliser JavaScript pour prévisualiser et télécharger des images sans actualiser la page

Solution au problème trouvé dans l'aperçu javascript des images_Image téléchargées Effets spéciaux

jQuery implémente l'aperçu local des images_jquery téléchargées

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript jquery css css3 html JS

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：CSS pur pour obtenir un effet de mouvement de vagueArticle suivant：CSS pur pour obtenir un effet de mouvement de vague

Articles Liés

Voir plus