js zum Implementieren von Details im Datei-Upload-Stil
1. Übersicht
Dieses JS enthält Schaltflächenstile, Listenstile sowie die Funktionen „Löschen“, „Hinzufügen“ und „Zoomen“ (unter Verwendung der integrierten Zoomfunktion, die eine API zum Platzieren Ihres Popup-Fensters zur Anzeige bereitstellt).
2. Parameter zum Erstellen von Objekten
Anwendungscodebeispiel:
<div Klasse="hj-Datei">
<Eingabetyp="Datei" Datei="" Klasse="hj-Datei-Eingabe">
<div Klasse="hj-box hj-append-item">
<div Klasse="Anhang-Element-Rand-Klasse">
<div Klasse="img-push">
<img src="./img/push.png" alt="">
</div>
</div>
</div>
<!-- Wenn der Button-Stil nicht aktiviert ist, kann dieses äußere Div gelöscht werden-->
<div Klasse="hj-btn-box hj-versteckt">
<div Klasse="hj-btn">
Bild auswählen</div>
</div>
<!-- Dateiinformationsliste-->
<div Klasse="hj-Dateiliste">
</div>
</div>
var Datei = neue Datei({
maxDateilänge: 2,
maxDateigröße: 1024,
Dateisuffix: ['mp4', 'mp3', 'word', 'pdf', 'ppt', 'excel', 'png', 'jpg'],
StopDialog: false,
showBtn:false
});
initHJFile(Datei);
3. Monitoring-Beispiel
//Wenn Sie das integrierte Popup-Fenster nicht verwenden möchten, können Sie die Funktion onlargeClickCallBack des Dateiobjekts file.callBack.onlargeClickCallBack = function (img, that) {} abhören.
file.callBack.ondialogBeforeClose = Funktion (Ereignis) {}
file.callBack.onaddImgList = Funktion () {}
4. Nutzung
Das Projektverzeichnis ist in der Abbildung oben dargestellt. Wenn Sie es verwenden möchten, fügen Sie einfach 5. QuellcodeDieser Quellcode enthält keine Symbole, alles in einer HTML-Seite
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
</Kopf>
<Stil>
* {
Polsterung: 0;
Rand: 0;
}
Körper {
Breite: 100vw;
Höhe: 100vh;
/* Anzeige: flex;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren; */
}
/* .Kasten {
Breite: 600px;
} */
.hj-Datei {
Breite: 100 %;
/* Höhe: 100 %; */
}
.hj-Datei-Eingabe {
Anzeige: keine;
}
.hj-box {
Anzeige: Flex;
Flex-Wrap: Umwickeln;
}
.Element anhängen {
Breite: 150px;
Höhe: 150px;
Rand: 1px gestrichelt #b1b5bb;
Rahmenradius: 5px;
Hintergrundfarbe: #fbfdff;
Anzeige: Flex;
Elemente ausrichten: zentrieren;
Rand: 10px;
Inhalt ausrichten: zentriert;
}
.Bildelement {
Breite: 150px;
Höhe: 150px;
Rahmenradius: 5px;
Rand: 10px;
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
Rand: 1px durchgezogen #eaedf1;
Position: relativ;
Hintergrundgröße: 100 % 100 %;
Hintergrundwiederholung: keine Wiederholung;
Übergang: 1s;
Animation: Übersetzer 1s;
}
.image-item-delete {
Animation: Bottom-Übersetzer .7s;
}
@keyframes Übersetzer {
0% {
Deckkraft: .2;
transformieren: übersetzen(0, -50%);
}
100 % {
Deckkraft: 1;
transformieren: übersetzen(0);
}
}
@keyframes Bottom-Übersetzer {
0% {
Deckkraft: 1;
transformieren: übersetzen(0, 0);
}
100 % {
Deckkraft: .2;
transformieren: übersetzen(0, 50%);
}
}
.img-push img {
Breite: 60px;
Höhe: 60px;
}
.append-item:hover {
Rahmenfarbe: #00d2fc;
}
.margin-Klasse {
Rand unten: 20px;
}
.Erste {
Hintergrundbild: URL('./img/66.jpg');
}
.z-index-promote {
Z-Index: 3;
}
.largeImg img {
Cursor: Zeiger;
Breite: 30px;
Höhe: 30px;
Übergang: 0,6 s;
Anzeige: keine;
}
.deleteImg img {
Cursor: Zeiger;
Breite: 40px;
Höhe: 40px;
Anzeige: keine;
}
.image-item:hover::vorher {
Inhalt: "";
Z-Index: 2;
Hintergrundfarbe: #42393999;
Breite: 100 %;
Position: absolut;
Höhe: 100%;
Rahmenradius: 5px;
Übergang: 0,6 s;
Animation: Transparenz linear .6s;
}
.image-item:hover .largeImg img {
Anzeige: Block;
Animation: Transparenz linear .6s;
}
.image-item:hover .deleteImg img {
Anzeige: Block;
Animation: Transparenz linear .6s;
}
@keyframes Transparenz
0% {
Deckkraft: 0;
}
100 % {
Deckkraft: 1;
}
}
.hj-Schatten {
Breite: 100vw;
Höhe: 100vh;
Hintergrundfarbe: #302d2d99;
Position: fest;
Überlauf: versteckt;
Z-Index: 1978;
Anzeige: Flex;
links: 50%;
oben: 50 %;
transformieren: übersetzen(-50 %, -50 %);
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
Animation: hj-Schatten-Saccle .5s;
}
@keyframes hj-schatten-schatten {
0% {
transformieren: übersetzen (-50 %, -50 %), skalieren (0 %);
}
100 % {
transformieren: übersetzen (-50 %, -50 %), skalieren (100 %);
}
}
@keyframes hj-shade-hidden {
0% {
transformieren: übersetzen (-50 %, -50 %), skalieren (100 %);
}
100 % {
transformieren: übersetzen (-50 %, -50 %), skalieren (0 %);
}
}
.hj-shade-hidden {
Animation: hj-Schatten-versteckt 0,5 s;
}
.hj-Schatten {
Überlauf: automatisch;
}
.hj-Schatten .hj-Box {
Breite: 60%;
Höhe: 80%;
Polsterung: 20px 10px 10px 10px;
Hintergrundgröße: 100 % 100 %;
Hintergrundfarbe: weiß;
}
.hj-Schatten .hj-Box .hj-Img {
Breite: 100 %;
Überlauf: automatisch;
Höhe: 100%;
}
.hj-Dateiliste .hj-Dateilistenelement {
Hintergrundfarbe: weiß;
Farbe: #8cacb3;
Anzeige: Flex;
Zeilenhöhe: 2;
Schriftgröße: 0,8em;
}
.hj-Dateiliste .hj-Dateiliste-Element:hover {
Hintergrundfarbe: #00d2fc70;
Farbe: weiß;
}
.hj-Dateiliste .hj-Dateilistenelement .hj-links {
Breite: 30%;
Überlauf: versteckt;
Leerzeichen: Nowrap;
Textüberlauf: Auslassungspunkte;
}
.hj-Dateiliste .hj-Dateilistenelement .hj-left span {
Rand links: 20px;
Cursor: Zeiger;
}
.hj-Dateiliste .hj-Dateilistenelement .hj-rechts {
Breite: 30%;
Anzeige: Flex;
Elemente ausrichten: zentrieren;
Inhalt ausrichten: Ende;
}
.hj-Dateiliste .hj-Dateilistenelement .hj-right span {
Rand rechts: 20px;
}
.hj-Dateiliste .hj-Dateilistenelement .hj-rechts img {
Breite: 20px;
Höhe: 20px;
Cursor: Zeiger;
}
@keyframes hj-list-hidden {
0% {
Deckkraft: 1;
}
100 % {
Deckkraft: 0;
}
}
.hj-Liste-versteckt {
Animation: hj-Liste-versteckt .7s;
}
.hj-btn-box {
Rand unten: 25px;
}
.hj-btn-box .hj-btn {
Rand links: 20px;
Cursor: Zeiger;
Hintergrundfarbe: #009efa;
Breite: 30%;
Zeilenhöhe: 2;
Rahmenradius: 4px;
Farbe: weiß;
Schriftgröße: 1,2em;
Textausrichtung: zentriert;
}
.hj-versteckt {
Anzeige: keine;
}
</Stil>
<Text>
<div Klasse="Box">
<div Klasse="hj-Datei">
<Eingabetyp="Datei" Datei="" Klasse="hj-Datei-Eingabe">
<div Klasse="hj-box hj-append-item">
<div Klasse="Anhang-Element-Rand-Klasse">
<div Klasse="img-push">
<img src="./img/push.png" alt="">
</div>
</div>
</div>
<div Klasse="hj-btn-box hj-versteckt">
<div Klasse="hj-btn">
Bild auswählen</div>
</div>
<div Klasse="hj-Dateiliste">
</div>
</div>
</div>
<Skript>
// Dateikonstruktorfunktion File(obj) {
//Gesamtzahl der Dateien this.fileLength = 0;
// Datei-Array this.fileList = [];
// Objektparameter-Konfigurationsdatei this.config = {
// Maximale Anzahl von Dateien maxFileLength: obj.maxFileLength || 2,
// Maximale Dateigröße maxFileSize: obj.maxFileSize || 1024,
// Erlaubtes Dateiendung fileSuffix: obj.fileSuffix || ['mp4', 'mp3', 'word', 'pdf', 'ppt', 'excel', 'jpg', 'png'],
// Ob das Öffnen des Standard-Popup-Fensters StopDialog verhindert werden soll: obj.StopDialog || false,
// Breite und Höhe des Popup-Fensterstils shadeDialogStyle: obj.shade || [null, null],
// Ob der Button-Stil aktiviert werden soll showBtnImgStyle: obj.showBtn || false,
};
//Der einzige in fileDom gespeicherte Dom-Knoten this.dom = {
// Eingabedateiauswahl Eingabefeld dom
inputDom: null,
// Element anhängen, Klick-Dom hinzufügen
imageItemDom: null,
// Um das DOM des Bildes an den Knoten hj-append-item anzuhängen
appendItemDom: null,
// Um das DOM der Bilderliste nach dem Knoten hj-file-list hinzuzufügen
appendListDom: null,
};
// Ereignisverarbeitungsobjekt this.event = {
// Verarbeitung des Klickereignisses zum Anhängen von Elementen imageItemClick: () => {
dies.dom.inputDom.click();
},
// Eingabedateiauswahl Eingabefeld nach Auswahl der Bildereignisverarbeitung changeLoadFile: (file) => {
diese.Methode.filterFile(Datei.Ziel.Dateien);
},
// Bildlöschereignis imgDeleteClick: (id) => {
für (let index = 0; index < this.fileList.length; index++) {
wenn (diese.fileList[index].id == id) {
let _before = this.fileList.slice(0, index == this.fileList.length ? index - 1 :
Index);
Lassen Sie _after = diese.Dateiliste.slice(index + 1);
_vorher = _vorher.concat(_nachher);
// Bild löschen this.method.deleteImg(id);
setzeTimeout(() => {
diese.fileList[index].dom.remove();
diese.fileList[index].listDom.remove();
diese.Dateilänge--;
diese.Dateiliste = _before;
}, 600);
brechen;
}
}
1
},
// Bildvergrößerungsereignis imgLargeClick: (id) => {
: Lassen Sie imgFile = this.privateUtils.foreachFileListToId(id);
Konsole.log(Bilddatei);
dies.callBack.onlargeClickCallBack(imgFile, dies);
wenn (diese.config.StopDialog) zurückgeben;
let hjShadeDiv = document.getElementsByClassName('hj-shade');
wenn (hjShadeDiv.length != 0) zurückgeben;
let div = document.createElement('div');
div.Klassenname = "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('klicken', (Ereignis) => {
this.callBack.ondialogBeforeClose({
Veranstaltung: Veranstaltung,
imgFile: imgFile,
});
div.Klassenname = div.Klassenname + 'hj-shade-hidden';
setzeTimeout(() => {
Dokument.Body.RemoveChild(div);
}, 500);
})
// Verhindern Sie die abnormale Situation, dass der erste Ladevorgang nicht abgeschlossen ist und die Höhe im Schaltflächenmodus 0 ist. img.onload = () => {
div.appendChild(div2);
Dokument.body.appendChild(div);
dies.privateUtils.computeDialogWH(img, div2);
}
},
},
diese.Methode = {
// Bilder filtern filterFile: (list) => {
für (let index = 0; index < list.length; index++) {
lass Größe = parseInt(Liste[Index].Größe / 1024);
let Suffix = Liste[Index].Name.Teilzeichenfolge(Liste[Index].Name
.lastIndexOf('.') + 1);
// Ob es das Suffix erfüllt let isTrue = false;
// Dateigröße bestimmen if (size > this.config.maxFileSize) {
console.log("Datei ist zu groß");
brechen;
}
für (let j = 0; j < this.config.fileSuffix.length; j++) {
wenn (Suffix == dieses.config.fileSuffix[j]) {
istTrue = wahr;
brechen;
}
}
wenn (istWahr) {
Lassen Sie id = parseInt(Math.random() * 100000);
diese.fileList.push({
Ich würde: Ich würde,
Datei: Liste[index],
base64: '',
dom: '',
listDom: '',
});
Konsole.log(diese.Dateiliste);
diese.Methode.streamToImgBase64(Liste[Index], ID);
} anders {
console.log("Dateierweiterung stimmt nicht überein");
}
}
},
// Bildanzeige verarbeiten streamToImgBase64: (file, id) => {
var fileReader = neuer FileReader();
fileReader.onload = (Daten) => {
diese.Methode.appendImage(data.target.result, id);
}
fileReader.readAsDataURL(Datei);
},
// Füge das Bild an den DOM-Knoten an appendImage: (url, id) => {
let div = document.createElement('div');
div.className = 'Bildelement-Randklasse';
div.style.backgroundImage = "url(' + url + ')';
für (let index = 0; index < this.fileList.length; index++) {
wenn (diese.fileList[index].id == id) {
diese.Dateiliste[index].dom = div;
diese.Dateiliste[index].base64 = URL;
brechen;
}
}
//Dom erstellen und löschen, alles mit addEventListener
let largeDom = document.createElement('div');
largeDom.className = "largeImg z-index-promote";
largeDom.innerHTML = `<img src="./img/big.png" alt="">`;
largeDom.addEventListener('klicken', () => {
dieses.event.imgLargeClick(id);
})
let deleteDom = document.createElement('div');
deleteDom.className = "deleteImg z-index-promote";
deleteDom.innerHTML = `<img src="./img/delete.png" alt="">`;
deleteDom.addEventListener('klicken', () => {
dieses.event.imgDeleteClick(id);
})
div.appendChild(großerDom);
div.appendChild(deleteDom);
dies.dom.appendItemDom.appendChild(div);
diese.Dateilänge++;
// Bildliste hinzufügen this.method.addImgList(id);
},
// Bild löschen deleteImg: (id) => {
für (let index = 0; index < this.fileList.length; index++) {
wenn (diese.fileList[index].id == id) {
let item = diese.Dateiliste[index];
let cless = item.dom.getAttribute('Klasse');
let clessList = item.listDom.getAttribute('Klasse');
this.fileList[index].dom.setAttribute("Klasse", cless + " image-item-delete");
this.fileList[index].listDom.setAttribute("Klasse", clessList + " hj-list-hidden ")
brechen;
}
}
},
// Bilderliste hinzufügen addImgList: (id) => {
let Datei = this.privateUtils.foreachFileListToId(id);
this.callBack.onaddImgList(Datei, dies);
let div = document.createElement('div');
div.className = "hj-Dateilistenelement"
div$left = document.createElement('div');
div$right = document.createElement('div');
let file$img = document.createElement('img');
let fileSize = this.privateUtils.computeFileSize(file.file.size);
Datei$img.src = './img/delete-balck.png';
div$left.className = "hj-links";
div$right.className = "hj-rechts";
div$left.innerHTML = `<span>${Datei.Dateiname}</span>`
div$right.innerHTML = `<span>${fileSize}</span>`;
div$left.addEventListener('klicken', () => {
dieses.event.imgLargeClick(id);
})
Datei$img.addEventListener('click', () => {
dieses.event.imgDeleteClick(id);
})
div$right.appendChild(Datei$img);
div.appendChild(div$links);
div.appendChild(div$rechts);
für (let index = 0; index < this.fileList.length; index++) {
wenn (id == diese.Dateiliste[index].id) {
diese.fileList[index].listDom = div;
brechen;
}
}
dies.dom.appendListDom.appendChild(div);
},
}
// Offengelegte Überwachungs-API
dies.callBack = {
// Verhindern, dass das Standard-Popup-Fenster bei onlargeClickCallBack geöffnet wird: (img, that) => {},
// Rückruf, wenn das integrierte Popup-Fenster geschlossen wird // {event: Quellereignisobjekt des Klicks imgFile: globale Dateiobjektinformationen des zu schließenden Bildes}
ondialogBeforeClose: (Objekt) => {},
// Rückruf jedes Mal, wenn eine Bilderliste hinzugefügt wird onaddImgList: (file, that) => {},
},
diese.privateUtils = {
foreachFileListToId: (id) => {
für (let index = 0; index < this.fileList.length; index++) {
wenn (id == diese.Dateiliste[index].id) {
gib diese.Dateiliste[index] zurück;
}
}
},
computeFileSize: (Größe) => {
let Ergebnis = parseInt(Größe / 1024);
if (Ergebnis < 1024) {
Ergebnis zurückgeben + '.KB';
} sonst wenn (Ergebnis >= 1024) {
returniere parseInt(Ergebnis / 1024) + ".MB";
}
},
// Höhe und Länge des Popup-Fensters berechnen computeDialogWH: (img, dom) => {
lass w = this.config.shadeDialogStyle[0];
lass h = this.config.shadeDialogStyle[1];
sei w2 = img.naturalWidth;
sei h2 = img.naturalHeight;
if (w2 > Fenster.innereBreite * 0,9) {
w2 = Fenster.innereBreite * 0,7;
h2 = Fenster.innereHöhe * 0,7;
}
dom.style.width = w == null ? w2 + "px" : w;
dom.style.height = h == null? h2 + "px" : h;
}
}
}
var Datei = neue Datei({
maxDateilänge: 2,
maxDateigröße: 1024,
Dateisuffix: ['mp4', 'mp3', 'word', 'pdf', 'ppt', 'excel', 'png', 'jpg'],
StopDialog: false,
showBtn:false
});
initHJFile(Datei);
// Wenn Sie das integrierte Popup-Fenster nicht verwenden möchten, können Sie die Funktion onlargeClickCallBack des Dateiobjekts file.callBack.onlargeClickCallBack = function (img, that) {} abhören.
file.callBack.ondialogBeforeClose = Funktion (Ereignis) {}
file.callBack.onaddImgList = Funktion () {}
// Erste Informationen laden, wie etwa das Hinzufügen von DOM-Knoten function initHJFile(file) {
console.log(Datei);
Geben Sie input_dom ein, um die Datei hj-file-input zu formatieren.
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];
Datei.dom.inputDom = input_dom;
Datei.dom.imageItemDom = imageItem_dom;
Datei.dom.appendListDom = appendList_dom;
wenn (datei.config.showBtnImgStyle) {
// Schaltflächenmodus aktivieren appendItem_dom.style.display = 'none';
let btn = document.getElementsByClassName('hj-btn-box');
konsole.log(btn);
wenn (btn.length != 0) {
btn[0].className = "hj-btn-box";
btn[0].children[0].addEventListener('klicken', file.event.imageItemClick);
} anders {
console.log("btn-Klasse nicht gefunden");
throw new Error('Das für den Schaltflächenmodus erforderliche HTML ist nicht definiert.')
}
}
Datei.dom.appendItemDom = appendItem_dom;
file.dom.imageItemDom.addEventListener('klicken', file.event.imageItemClick);
file.dom.inputDom.addEventListener('ändern', file.event.changeLoadFile)
}
</Skript>
</body>
</html>
Dies ist das Ende dieses Artikels über die Details zur Implementierung von Datei-Upload-Stilen mit js. Weitere relevante Inhalte zur Implementierung von Datei-Upload-Stilen mit js finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Der Einsatz von MySQL Triggern und worauf zu achten ist
>>: Detaillierte Erklärung zum Ein- und Aussteigen aus dem Docker-Container
Artikel empfehlen
Das WeChat-Applet realisiert die Chatroom-Funktion
In diesem Artikel wird der spezifische Code des W...
Lösung für das Problem „Fehler beim Konfigurieren von IDEA für die Verbindung zur MySQL-Datenbank“
Dieser Artikel stellt hauptsächlich die Lösung fü...
Lösen Sie das Problem, dass die Zeitzone in der Linux-Umgebung nicht eingestellt werden kann
Beim Ändern der Zeitzone unter Linux ist es immer...
Fallstricke bei der neueren Version des IDEA2021 Tomcat10-Servlets
Da die Version, die ich beim Lernen verwendet hab...
Anfangseinstellungen nach der Installation von Ubuntu 16 in der Entwicklungsumgebung
Das Büro benötigt ein Ubuntu-System als Linux-Ent...
Detaillierte Erläuterung von MySQL-Ereignisänderungsereignissen (ALTER EVENT), Deaktivierungsereignissen (DISABLE), Aktivierungsereignissen (ENABLE), Ereignisumbenennungen und Datenbankereignismigrationsvorgängen
In diesem Artikel werden anhand von Beispielen di...
Diese Dinge wissen Sie vielleicht nicht über die automatische ID-Inkrementierung in MySQL
Einführung: Wenn wir MySQL zum Erstellen einer Ta...
React Native meldet den Fehler „Ein Parameter vom Typ ‚NSArray＜id＜RCTBridgeModule＞＞ kann nicht initialisiert werden“ (Lösung)
Kürzlich wurde beim Ausführen eines alten RN-Proj...
MySQL-Fehlernummer 1129 – Lösung
SQLyog stellt eine Verbindung zu MySQL her, Fehle...
So bedienen Sie JSON-Felder in MySQL
MySQL 5.7.8 führte das JSON-Feld ein. Dieser Feld...
Details zum Prototypmodus des Javascript-Entwurfsmusters
Inhaltsverzeichnis 1. Prototyp-Modus Beispiel 1 B...
Füllen Sie die Suchfunktion auf der HTML-Seite aus
Ich habe kürzlich an einem Framework gearbeitet, ...
WebWorker kapselt JavaScript-Sandbox-Details
Inhaltsverzeichnis 1. Szenario 2. Implementieren ...
Implementierungsschritte zur Kapselung von Komponenten basierend auf React
Inhaltsverzeichnis Vorwort Wie kapselt Antd Kompo...
WePY-Cloud-Entwicklungspraxis im Linux-Befehlsabfrage-Applet
Hallo zusammen, heute werde ich mit Ihnen die WeP...