Upload avatar:
Related keywords:
ondragover (drag the element to move in the drop zone)
ondrop (Elements are triggered in the delivery area but need to handle the impact of the browser's default events: ondragenter, ondragover)
dataTransfer (it can save one or more data, one or more data types, and transfer the dragged data so that other operations can be performed on the data when the drag is over)
<!-- html: -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Upload avatar pictures</title>
<link rel="stylesheet" type="text/css" href="css/" rel="external nofollow" />
</head>
<body>
<div class="container">
<h1>Drag external image or click upload image</h1>
<div class="main">
<input type="file" name="file" />
<img src="img/cross.png" class="btn">
</div>
</div>
</body>
<script src="js/"></script>
</html>
/* css style: */
*{
margin: 0;
padding: 0;
}
.container{
width: 50%;
margin: 0 auto;
height: 400px;
padding: 20px;
text-align: center;
}
.main{
width: 200px;
height: 200px;
border: 2px dashed #666;
margin: 20px auto;
position: relative;
}
.main input{
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 11;
}
.main .btn{
width: 150px;
height: 150px;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
/* js */
= function() {
// Get elements var file = ("#file");
var addImg = (".btn");
var main = (".main");
// Package and upload pictures function upload(img) {
// Instantiate an image object var imgFile = new FileReader();
// Get the path to the image (img);
= function(e) {
// Set the upload icon to the current image = ;
}
}
/* 1. Click to upload the picture */
= function(e) {
// Get the information in the uploaded image var img = [0];
upload(img);
}
/* 2. Drag and drop upload */
= function() {
return false;
}
= function(e) {
upload([0]);
return false;
}
}
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.