Shulou(Shulou.com)06/03 Report--

This article introduces the "how to use js to achieve file upload style details" related knowledge, in the actual case of the operation process, many people will encounter such a dilemma, then let the editor lead you to learn how to deal with these situations! I hope you can read it carefully and be able to achieve something!

1. Overview

This js includes button style, list style, with delete, add, zoom in (use the built-in zoom-in function, provide API to put into your pop-up window for display)

Listenable event ValuewdaasdonlargeClickCallBack if you want to use its own pop-up window, just listen to this function and get the return value to assign to the img- > href of your pop-up window to imgFile object (including all the information of the clicked image) that (the globally unique object of this js) You can get all your values here.) the callback object value of the closed pop-up window of ondialogBeforeClose is an object object. Event-> the source event object of the executed event .imgFile-> when clicked to close the pop-up window, the picture object information displayed on the current pop-up window onaddImgList every time a picture callback file-> file object that-> (the global unique object of this js is added) You can get all your values here) 2. The parameters of the created object mean the maximum number of files maxFileLength can exist. Default value: 2maxFileSize maximum file size for each file: 1024 (1m) fileSuffix allowed to upload file suffix default: ['mp4',' mp3', 'word',' pdf', 'ppt',' excel', 'jpg' Does' png'] StopDialog prevent the default pop-up window that comes with it? default: falseshadeDialogStyle if you open the option with its own pop-up window Then this controls the height and width of the open pop-up window. The default value is null: [null, null]. If you want to set the percentage and px, please change the array directly. The first item of the array represents width, and the second item represents whether the button style of high showBtnImgStyle is enabled. Default value: false

Use the code example:

Select var file = new File ({maxFileLength: 2, maxFileSize: 1024, fileSuffix: ['mp4',' mp3', 'word',' pdf', 'ppt',' excel', 'png',' jpg'], StopDialog: false, showBtn: false}); initHJFile (file) 3. Listening example / / if you do not want to use the built-in pop-up window, you can choose the onlargeClickCallBack function file.callBack.onlargeClickCallBack = function (img, that) {} file.callBack.ondialogBeforeClose = function (event) {} file.callBack.onaddImgList = function () {} 4. Usage

The project directory is shown in the above figure

If you want to use it, just put js in your project path, and then put img in your static directory (static resource path).

The icon introduced by default in js here is the relative path of. /. Please search by yourself and change it to the file path of your project.

The example of the project in the above figure is a complete package that can be opened and viewed directly. The download address is provided later.

5. Source code

This source code is the source code without icons, all in a html page

Document * {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% Background-repeat: no-repeat; transition: 1s; animation: translaters 1s;} .image-item-delete {animation: bottom-translaters .7s;} @ keyframes translaters {0% {opacity: .2; transform: translate (0,-50%);} 100% {opacity: 1 Transform: translate (0);}} @ keyframes bottom-translaters {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-sacle .5s;} @ keyframes hj-shade-sacle {0% {transform: translate (- 50%,-50%) scale } 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%; 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;}

Select the picture / / File constructor function File (obj) {/ / the total number of files this.fileLength = 0; / the 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 pop-up window from opening by default StopDialog: obj.StopDialog | | false, / / style width and height of pop-up window shadeDialogStyle: obj.shade | | [null, null] / / whether to enable button style showBtnImgStyle: obj.showBtn | | false,} / / the only dom node stored in fileDom this.dom = {/ / input file check the input box dom inputDom: null, / / append-item add click dom imageItemDom: null, / / dom appendItemDom: null to append the picture to the hj-append-item node / / dom appendListDom: null,} to add the picture list to the hj-file-list node / / event handling object this.event = {/ / append-item Click event handling imageItemClick: () = > {this.dom.inputDom.click () }, / / input file check the input box to handle the event after selecting the picture 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); // 删除图片 this.method.deleteImg(id); setTimeout(() =>

{this.fileList [index] .dom.remove (); this.fileList.listDom.remove (); this.fileLength--; this.fileList = _ before ), break) }} 1}, / / Image magnification 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 img.onload = () = > {div.appendChild (div2); document.body.appendChild (div) when the first loading is not completed and the height is 0 in button mode This.privateUtils.computeDialogWH (img, div2);}},}, this.method = {/ / filter picture 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); // 是否符合后缀 let isTrue = false; // 判断文件大小 if (size >

This.config.maxFileSize) {console.log ("the file is too big"); 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("文件后缀不符合"); } } }, // 处理图片展示 streamToImgBase64: (file, id) =>

{var fileReader = new FileReader (); fileReader.onload = (data) = > {this.method.appendImage (data.target.result, id);} fileReader.readAsDataURL (file) }, / / append pictures 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; } } // 创建删除dom,全部使用addEventListener let largeDom = document.createElement('div'); largeDom.className = 'largeImg z-index-promote'; largeDom[xss_clean] = `

`; largeDom.addEventListener ('click', () = > {this.event.imgLargeClick (id);}) let deleteDom = document.createElement (' div'); deleteDom.className = 'deleteImg DeleteDom [XSS _ clean] = `

`; deleteDom.addEventListener ('click', () = > {this.event.imgDeleteClick (id);}) div.appendChild (largeDom); div.appendChild (deleteDom); this.dom.appendItemDom.appendChild (div) This.fileLength++; / / add picture list this.method.addImgList (id);}, / / delete picture 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; } } }, // 添加图片列表 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 [XSS _ clean] = `$ {file.file.name} `div$ right` [XSS _ clean] =` ${fileSize} `; 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); }, } // 暴露的监听Api this.callBack = { // 阻止默认自带的打开弹窗 onlargeClickCallBack: (img, that) =>

{}, / / callback when the built-in pop-up window is closed / / {event: the source event object imgFile clicked: the global file object information of the picture closed} ondialogBeforeClose: (object) = > {} / / callback onaddImgList: (file, that) = > {},}, this.privateUtils = {foreachFileListToId: (id) = > {for (let index = 0) each time the picture list is added 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 h3 = img.naturalHeight; if (w2 > window.innerWidth * 0.9) {w2 = window.innerWidth * 0.7 H3 = window.innerHeight * 0.7;} dom.style.width = w = = null? W2 + "px": W; dom.style.height = h = = null? H3 + "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 do not want to use the built-in pop-up window, you can choose the onlargeClickCallBack function file.callBack.onlargeClickCallBack = function (img, that) {} file.callBack.ondialogBeforeClose = function (event) {} file.callBack.onaddImgList = function () {} / / to load the initial information, such as adding function initHJFile (file) {console.log (file) of dom node. 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 ('HTML' required for button mode not defined)}} file.dom.appendItemDom = appendItem_dom; file.dom.imageItemDom.addEventListener (' click', file.event.imageItemClick) File.dom.inputDom.addEventListener ('change', file.event.changeLoadFile)} "how to use js to upload style details" is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.