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 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
Recommend
Vue uniapp realizes the segmenter effect
This article shares the specific code of vue unia...
Detailed explanation of Linux text processing tools
1. Count the number of users whose default shell ...
Solution to the problem of large font size on iPhone devices in wap pages
If you don't want to use javascript control, t...
How to preview pdf file using pdfjs in vue
Table of contents Preface think Library directory...
Share a Markdown editor based on Ace
I think editors are divided into two categories, ...
How to implement page jump in Vue project
Table of contents 1. Create a vue-cli default pro...
How to bind Docker container to external IP and port
Docker allows network services to be provided by ...
VMware Tools installation and configuration graphic tutorial for Ubuntu 16.04 64-bit
This article shares with you a graphic tutorial o...
Detailed explanation of the implementation process of ServerSocket default IP binding
When the server needs to be started during develo...
Solve the problem of OpenLayers 3 loading vector map source
1. Vector Map Vector graphics use straight lines ...
WeChat applet calculator example
This article shares the specific code of the WeCh...
React internationalization react-i18next detailed explanation
Introduction react-i18next is a powerful internat...
Vue+flask realizes video synthesis function (drag and drop upload)
Table of contents We have written about drag and ...
Pure CSS to adjust Div height according to adaptive width (percentage)
Under the requirements of today's responsive ...
Detailed steps to install nginx on Apple M1 chip and deploy vue project
brew install nginx Apple Mac uses brew to install...