html+css+js 實現拍照預覽上傳圖片功能執行個體分享

最後更新：2018-01-16 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

我們在做網頁時經常會需要有上傳圖片的需求，可能是選擇圖片或者拍照上傳，如果簡單的使用

<input type="file"/>

這種方式雖然也能實現功能，但使用者體驗上可能會差了一些，所以本文記錄了使用css+js實現圖片選中後的預覽及壓縮上傳功能，部分帶來來源於網路，此處做了記錄整理。

效果預覽：

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

2.建立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.建立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('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;}//提交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: 'POST',        cache: false,        data: formData,        timeout:180000,        processData: false,        contentType: false,        success:function(r){        },        error:function(r){          }   });}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More