Html+css+js implement photo preview upload Picture function instance share

We often need to upload images when we do the Web page, may be the choice of pictures or photos upload, if simple to use

<input type= "File"/>

Although this way can also realize the function, but the user experience may be a little worse, so this article recorded the use of CSS+JS implementation of the picture selected after the preview and compression upload function, part of the resulting from the network, here to do a record collation.

Effect preview:

1. Create index.html

<! DOCTYPE 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 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. Create Index.js



Window.onload=function () {document.getElementById ("Id-face"). AddEventListener ("Change", function () {Onfil    Echange (This, "Face-result", "Face-empty-result")}); document.getElementById ("Id-back"). AddEventListener ("Change", function () {Onfilechange (this, "Back-result", "b    Ack-empty-result ")});    Document.getelementsbyclassname ("btn") [0].addeventlistener ("click", Function () {submit (); });};/ * * Processing when the picture is selected * @param {*} fileobj Input File element * @param {*} el//Selected element ID used to display the picture * @param {*} Btnel//The button area ID displayed when the picture is not selected */fu Nction 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.fil        Es[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 image to return data in base64 format * @param {*} image img Element * @param {*} width Compressed picture width * @param {*} height compressed picture height * @param {*} q    UA//Picture 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 Submit//document.getelementbyid ("MainForm"). Submit (); 2, after compression Ajax submitted 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) {}});}