js to implement file upload style details
1. Overview
This js includes button styles, list styles, with delete, add, and zoom (using the built-in zoom function, providing an API to put your pop-up window for display)
2. Parameters for creating objects
Usage code example:
<div class="hj-file">
<input type="file" file="" class="hj-file-input">
<div class="hj-box hj-append-item">
<div class="append-item margin-class">
<div class="img-push">
<img src="./img/push.png" alt="">
</div>
</div>
</div>
<!-- When the button style is not enabled, this outer div can be deleted-->
<div class="hj-btn-box hj-hidden">
<div class="hj-btn">
Select image</div>
</div>
<!-- File information list-->
<div class="hj-file-list">
</div>
</div>
var file = new File({
maxFileLength: 2,
maxFileSize: 1024,
fileSuffix: ['mp4', 'mp3', 'word', 'pdf', 'ppt', 'excel', 'png', 'jpg'],
StopDialog: false,
showBtn:false
});
initHJFile(file);
3. Monitoring Example
//If you don't want to use the built-in pop-up window, you can choose to listen to the onlargeClickCallBack function of the file object file.callBack.onlargeClickCallBack = function (img, that) {}
file.callBack.ondialogBeforeClose = function (event) {}
file.callBack.onaddImgList = function () {}
4. Usage
The project directory is shown in the figure above. If you want to use it, just put 5. Source codeThis source code does not include icons, all in one html page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
body {
width: 100vw;
height: 100vh;
/* display: flex;
justify-content: center;
align-items: center; */
}
/* .box {
width: 600px;
} */
.hj-file {
width: 100%;
/* height: 100%; */
}
.hj-file-input {
display: none;
}
.hj-box {
display: flex;
flex-wrap: wrap;
}
.append-item {
width: 150px;
height: 150px;
border: 1px dashed #b1b5bb;
border-radius: 5px;
background-color: #fbfdff;
display: flex;
align-items: center;
margin: 10px;
justify-content: center;
}
.image-item {
width: 150px;
height: 150px;
border-radius: 5px;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #eaedf1;
position: relative;
background-size: 100% 100%;
background-repeat: no-repeat;
transition: 1s;
animation: translaters 1s;
}
.image-item-delete {
animation: bottom-translators .7s;
}
@keyframes translaters {
0% {
opacity: .2;
transform: translate(0, -50%);
}
100% {
opacity: 1;
transform: translate(0);
}
}
@keyframes bottom-translators {
0% {
opacity: 1;
transform: translate(0, 0);
}
100% {
opacity: .2;
transform: translate(0, 50%);
}
}
.img-push img {
width: 60px;
height: 60px;
}
.append-item:hover {
border-color: #00d2fc;
}
.margin-class {
margin-bottom: 20px;
}
.first {
background-image: url('./img/66.jpg');
}
.z-index-promote {
z-index: 3;
}
.largeImg img {
cursor: pointer;
width: 30px;
height: 30px;
transition: .6s;
display: none;
}
.deleteImg img {
cursor: pointer;
width: 40px;
height: 40px;
display: none;
}
.image-item:hover::before {
content: "";
z-index: 2;
background-color: #42393999;
width: 100%;
position: absolute;
height: 100%;
border-radius: 5px;
transition: .6s;
animation: transparency linear .6s;
}
.image-item:hover .largeImg img {
display: block;
animation: transparency linear .6s;
}
.image-item:hover .deleteImg img {
display: block;
animation: transparency linear .6s;
}
@keyframes transparency
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.hj-shade {
width: 100vw;
height: 100vh;
background-color: #302d2d99;
position: fixed;
overflow: hidden;
z-index: 1978;
display: flex;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
justify-content: center;
align-items: center;
animation: hj-shade-saccle .5s;
}
@keyframes hj-shade-shadow {
0% {
transform: translate(-50%, -50%) scale(0%);
}
100% {
transform: translate(-50%, -50%) scale(100%);
}
}
@keyframes hj-shade-hidden {
0% {
transform: translate(-50%, -50%) scale(100%);
}
100% {
transform: translate(-50%, -50%) scale(0%);
}
}
.hj-shade-hidden {
animation: hj-shade-hidden .5s;
}
.hj-shade {
overflow:auto;
}
.hj-shade .hj-box {
width: 60%;
height: 80%;
padding: 20px 10px 10px 10px;
background-size: 100% 100%;
background-color: white;
}
.hj-shade .hj-box .hj-img {
width: 100%;
overflow:auto;
height: 100%;
}
.hj-file-list .hj-file-list-item {
background-color: white;
color: #8cacb3;
display: flex;
line-height: 2;
font-size: 0.8em;
}
.hj-file-list .hj-file-list-item:hover {
background-color: #00d2fc70;
color: white;
}
.hj-file-list .hj-file-list-item .hj-left {
width: 30%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.hj-file-list .hj-file-list-item .hj-left span {
margin-left: 20px;
cursor: pointer;
}
.hj-file-list .hj-file-list-item .hj-right {
width: 30%;
display: flex;
align-items: center;
justify-content: end;
}
.hj-file-list .hj-file-list-item .hj-right span {
margin-right: 20px;
}
.hj-file-list .hj-file-list-item .hj-right img {
width: 20px;
height: 20px;
cursor: pointer;
}
@keyframes hj-list-hidden {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.hj-list-hidden {
animation: hj-list-hidden .7s;
}
.hj-btn-box {
margin-bottom: 25px;
}
.hj-btn-box .hj-btn {
margin-left: 20px;
cursor: pointer;
background-color: #009efa;
width: 30%;
line-height: 2;
border-radius: 4px;
color: white;
font-size: 1.2em;
text-align: center;
}
.hj-hidden {
display: none;
}
</style>
<body>
<div class="box">
<div class="hj-file">
<input type="file" file="" class="hj-file-input">
<div class="hj-box hj-append-item">
<div class="append-item margin-class">
<div class="img-push">
<img src="./img/push.png" alt="">
</div>
</div>
</div>
<div class="hj-btn-box hj-hidden">
<div class="hj-btn">
Select image</div>
</div>
<div class="hj-file-list">
</div>
</div>
</div>
<script>
// File constructor function File(obj) {
//Total number of files this.fileLength = 0;
// File array this.fileList = [];
// Object parameter configuration file this.config = {
// Maximum number of files maxFileLength: obj.maxFileLength || 2,
// Maximum file size maxFileSize: obj.maxFileSize || 1024,
// Allowed file suffix fileSuffix: obj.fileSuffix || ['mp4', 'mp3', 'word', 'pdf', 'ppt', 'excel', 'jpg', 'png'],
// Whether to prevent the default pop-up window StopDialog from opening: obj.StopDialog || false,
// Pop-up window style width and height shadeDialogStyle: obj.shade || [null, null],
// Whether to enable the button style showBtnImgStyle: obj.showBtn || false,
};
//The only dom node stored in fileDom this.dom = {
// input file selection input box dom
inputDom: null,
// append-item add click dom
imageItemDom: null,
// To append the image's DOM to the hj-append-item node
appendItemDom: null,
// To add the DOM of the image list after the hj-file-list node
appendListDom: null,
};
// Event processing object this.event = {
// append-item click event processing imageItemClick: () => {
this.dom.inputDom.click();
},
// Input file selection input box after selecting the picture event processing changeLoadFile: (file) => {
this.method.filterFile(file.target.files);
},
// Image deletion event imgDeleteClick: (id) => {
for (let index = 0; index < this.fileList.length; index++) {
if (this.fileList[index].id == id) {
let _before = this.fileList.slice(0, index == this.fileList.length ? index - 1 :
index);
let _after = this.fileList.slice(index + 1);
_before = _before.concat(_after);
// Delete the image this.method.deleteImg(id);
setTimeout(() => {
this.fileList[index].dom.remove();
this.fileList[index].listDom.remove();
this.fileLength--;
this.fileList = _before;
}, 600);
break;
}
}
1
},
// Image enlargement event imgLargeClick: (id) => {
let imgFile = this.privateUtils.foreachFileListToId(id);
console.log(imgFile);
this.callBack.onlargeClickCallBack(imgFile, this);
if (this.config.StopDialog) return;
let hjShadeDiv = document.getElementsByClassName('hj-shade');
if (hjShadeDiv.length != 0) return;
let div = document.createElement('div');
div.className = 'hj-shade';
let div2 = document.createElement('div');
div2.className = 'hj-box';
let img = document.createElement('img');
img.className = 'hj-img';
img.src = imgFile.base64;
div2.appendChild(img);
div.addEventListener('click', (event) => {
this.callBack.ondialogBeforeClose({
event: event,
imgFile: imgFile,
});
div.className = div.className + 'hj-shade-hidden';
setTimeout(() => {
document.body.removeChild(div);
}, 500);
})
// Prevent the abnormal situation that the first loading is not completed and the height is 0 in button mode img.onload = () => {
div.appendChild(div2);
document.body.appendChild(div);
this.privateUtils.computeDialogWH(img, div2);
}
},
},
this.method = {
// Filter images filterFile: (list) => {
for (let index = 0; index < list.length; index++) {
let size = parseInt(list[index].size / 1024);
let suffix = list[index].name.substring(list[index].name
.lastIndexOf('.') + 1);
// Whether it meets the suffix let isTrue = false;
// Determine the file size if (size > this.config.maxFileSize) {
console.log("File is too large");
break;
}
for (let j = 0; j < this.config.fileSuffix.length; j++) {
if (suffix == this.config.fileSuffix[j]) {
isTrue = true;
break;
}
}
if (isTrue) {
let id = parseInt(Math.random() * 100000);
this.fileList.push({
id: id,
file: list[index],
base64: '',
dom: '',
listDom: '',
});
console.log(this.fileList);
this.method.streamToImgBase64(list[index], id);
} else {
console.log("File extension does not match");
}
}
},
// Process image display streamToImgBase64: (file, id) => {
var fileReader = new FileReader();
fileReader.onload = (data) => {
this.method.appendImage(data.target.result, id);
}
fileReader.readAsDataURL(file);
},
// Append the image to the DOM node appendImage: (url, id) => {
let div = document.createElement('div');
div.className = 'image-item margin-class';
div.style.backgroundImage = 'url(' + url + ')';
for (let index = 0; index < this.fileList.length; index++) {
if (this.fileList[index].id == id) {
this.fileList[index].dom = div;
this.fileList[index].base64 = url;
break;
}
}
// Create and delete dom, all using addEventListener
let largeDom = document.createElement('div');
largeDom.className = 'largeImg z-index-promote';
largeDom.innerHTML = `<img src="./img/big.png" alt="">`;
largeDom.addEventListener('click', () => {
this.event.imgLargeClick(id);
})
let deleteDom = document.createElement('div');
deleteDom.className = 'deleteImg z-index-promote';
deleteDom.innerHTML = `<img src="./img/delete.png" alt="">`;
deleteDom.addEventListener('click', () => {
this.event.imgDeleteClick(id);
})
div.appendChild(largeDom);
div.appendChild(deleteDom);
this.dom.appendItemDom.appendChild(div);
this.fileLength++;
// Add image list this.method.addImgList(id);
},
// Delete image deleteImg: (id) => {
for (let index = 0; index < this.fileList.length; index++) {
if (this.fileList[index].id == id) {
let item = this.fileList[index];
let cless = item.dom.getAttribute('class');
let clessList = item.listDom.getAttribute('class');
this.fileList[index].dom.setAttribute("class", cless + " image-item-delete");
this.fileList[index].listDom.setAttribute("class", clessList + " hj-list-hidden ")
break;
}
}
},
// Add image list addImgList: (id) => {
let file = this.privateUtils.foreachFileListToId(id);
this.callBack.onaddImgList(file, this);
let div = document.createElement('div');
div.className = 'hj-file-list-item'
let div$left = document.createElement('div');
let div$right = document.createElement('div');
let file$img = document.createElement('img');
let fileSize = this.privateUtils.computeFileSize(file.file.size);
file$img.src = './img/delete-balck.png';
div$left.className = 'hj-left';
div$right.className = 'hj-right';
div$left.innerHTML = `<span>${file.file.name}</span>`
div$right.innerHTML = `<span>${fileSize}</span>`;
div$left.addEventListener('click', () => {
this.event.imgLargeClick(id);
})
file$img.addEventListener('click', () => {
this.event.imgDeleteClick(id);
})
div$right.appendChild(file$img);
div.appendChild(div$left);
div.appendChild(div$right);
for (let index = 0; index < this.fileList.length; index++) {
if (id == this.fileList[index].id) {
this.fileList[index].listDom = div;
break;
}
}
this.dom.appendListDom.appendChild(div);
},
}
// Exposed monitoring API
this.callBack = {
// Prevent the default pop-up window from opening onlargeClickCallBack: (img, that) => {},
// Callback when the built-in pop-up window is closed // {event: source event object of the click imgFile: global file object information of the image being closed}
ondialogBeforeClose: (object) => {},
// Callback every time an image list is added onaddImgList: (file, that) => {},
},
this.privateUtils = {
foreachFileListToId: (id) => {
for (let index = 0; index < this.fileList.length; index++) {
if (id == this.fileList[index].id) {
return this.fileList[index];
}
}
},
computeFileSize: (size) => {
let result = parseInt(size / 1024);
if (result < 1024) {
return result + '.KB';
} else if (result >= 1024) {
return parseInt(result / 1024) + ".MB";
}
},
// Calculate the height and length of the pop-up window computeDialogWH: (img, dom) => {
let w = this.config.shadeDialogStyle[0];
let h = this.config.shadeDialogStyle[1];
let w2 = img.naturalWidth;
let h2 = img.naturalHeight;
if (w2 > window.innerWidth * 0.9) {
w2 = window.innerWidth * 0.7;
h2 = window.innerHeight * 0.7;
}
dom.style.width = w == null ? w2 + "px" : w;
dom.style.height = h == null ? h2 + "px" : h;
}
}
}
var file = new File({
maxFileLength: 2,
maxFileSize: 1024,
fileSuffix: ['mp4', 'mp3', 'word', 'pdf', 'ppt', 'excel', 'png', 'jpg'],
StopDialog: false,
showBtn:false
});
initHJFile(file);
// If you don't want to use the built-in pop-up window, you can choose to listen to the onlargeClickCallBack function of the file object file.callBack.onlargeClickCallBack = function (img, that) {}
file.callBack.ondialogBeforeClose = function (event) {}
file.callBack.onaddImgList = function () {}
// Load initial information, such as adding DOM nodes function initHJFile(file) {
console.log(file);
let input_dom = document.getElementsByClassName('hj-file-input')[0];
let imageItem_dom = document.getElementsByClassName('append-item')[0];
let appendItem_dom = document.getElementsByClassName('hj-append-item')[0];
let appendList_dom = document.getElementsByClassName('hj-file-list')[0];
file.dom.inputDom = input_dom;
file.dom.imageItemDom = imageItem_dom;
file.dom.appendListDom = appendList_dom;
if (file.config.showBtnImgStyle) {
// Turn on button mode appendItem_dom.style.display = 'none';
let btn = document.getElementsByClassName('hj-btn-box');
console.log(btn);
if (btn.length != 0) {
btn[0].className = 'hj-btn-box';
btn[0].children[0].addEventListener('click', file.event.imageItemClick);
} else {
console.log("btn Class not found");
throw new Error('The HTML required for button mode is not defined')
}
}
file.dom.appendItemDom = appendItem_dom;
file.dom.imageItemDom.addEventListener('click', file.event.imageItemClick);
file.dom.inputDom.addEventListener('change', file.event.changeLoadFile)
}
</script>
</body>
</html>
This is the end of this article about the details of implementing file upload styles with js. For more relevant content about implementing file upload styles with js, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: The use of MySQL triggers and what to pay attention to
>>: Improving the effect of hyperlinks in web design and production
Recommend
WeChat applet implements the Record function
This article shares the specific code for the WeC...
Randomly generate an eight-digit discount code and save it to the MySQL database
Currently, many businesses are conducting promoti...
jQuery plugin to achieve carousel effect
A jQuery plugin every day - jQuery plugin to impl...
An example of using a MySQL statement to find out the number of bytes occupied by various integers and their maximum and minimum values
Directly code: select 'bigint unsigned' a...
Some lesser-known sorting methods in MySQL
Preface ORDER BY 字段名升序/降序, I believe that everyon...
Detailed explanation of Nginx regular expressions
Nginx (engine x) is a high-performance HTTP and r...
Detailed explanation of how Node.js middleware works
Table of contents What is Express middleware? Req...
Detailed tutorial on deploying Hadoop cluster using Docker
Recently, I want to build a hadoop test cluster i...
How to use Docker to build a tomcat cluster using nginx (with pictures and text)
First, create a tomcat folder. To facilitate the ...
Implementation ideas for docker registry image synchronization
Intro Previously, our docker images were stored i...
Html makes a simple and beautiful login page
Let’s take a look first. HTML source code: XML/HT...
The principle and implementation of js drag effect
The drag function is mainly used to allow users t...
MySQL database optimization: index implementation principle and usage analysis
This article uses examples to illustrate the prin...
Simple implementation method of Linux process monitoring and automatic restart
Purpose: Under Linux, the server program may be d...
How to create a test database with tens of millions of test data in MySQL
Sometimes you need to create some test data, base...