vue.js Bild-Batch-Upload-Plug-in
Das vue.js-Bild-Batch-Upload-Plug-in ist eine Bild-Upload-Steuerung, die auf dem vue.js-Framework basiert. Es eignet sich für den Bild-Upload-Code auf dem Mobiltelefon. Es unterstützt Batch-Upload, Drag-and-Drop-Bild-Upload und Anzeige von Dateinummer und -größe usw.
JS-Code
<script src="js/vue2.2.2.js"></script>
<script>
// import up from './src/components/Hello'
var app = new Vue({
el: '#app',
data () {
return {
imgList: [],
size: 0
}
},
methods: {
fileClick(){
document.getElementById('upload_file').click()
},
fileChange(el){
if (!el.target.files[0].size) return;
this.fileList(el.target.files);
el.target.value = ''
},
fileList(files){
for (let i = 0; i < files.length; i++) {
this.fileAdd(files[i]);
}
},
fileAdd(file){
this.size = this.size + file.size;//总大小
let reader = new FileReader();
reader.vue = this;
reader.readAsDataURL(file);
reader.onload = function () {
file.src = this.result;
this.vue.imgList.push({
file
});
}
},
fileDel(index){
this.size = this.size - this.imgList[index].file.size;//总大小
this.imgList.splice(index, 1);
},
bytesToSize(bytes){
if (bytes === 0) return '0 B';
let k = 1000, // or 1024
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));
return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
},
dragenter(el){
el.stopPropagation();
el.preventDefault();
},
dragover(el){
el.stopPropagation();
el.preventDefault();
},
drop(el){
el.stopPropagation();
el.preventDefault();
this.fileList(el.dataTransfer.files);
}
}
})
</script> Alle Ressourcen auf dieser Website werden von Internetnutzern bereitgestellt oder von großen Download-Sites nachgedruckt. Bitte überprüfen Sie selbst die Integrität der Software! Alle Ressourcen auf dieser Website dienen nur als Referenz zum Lernen. Bitte nutzen Sie diese nicht für kommerzielle Zwecke. Andernfalls sind Sie für alle Folgen verantwortlich! Wenn ein Verstoß vorliegt, kontaktieren Sie uns bitte, um ihn zu löschen. Kontaktinformationen: admin@php.cn
Verwandter Artikel
Bild-Batch-Upload-JS-Plugin imgFileupload.js
30 Nov 2019
In diesem Artikel wird die Verwendung von imgFileupload.js vorgestellt, einem Plug-in zum Hochladen von Bildern. Ich hoffe, dass es für Schüler, die js lernen, hilfreich sein wird. Wählen Sie Bilder stapelweise aus, begrenzen Sie die Bildtypen durch „Akzeptieren“ und begrenzen Sie die Größe einer einzelnen Datei durch „FileSize“.
ThinkPHP5.0-Implementierung der Bild-Upload-Plug-in-Beispielfreigabe
10 Jan 2018
Das thinkphp5.0-Plug-in zum Hochladen von Bildern kann eine Vorschau von zugeschnittenen Bildern anzeigen und Originalbilder speichern. Nach dem Zuschneiden von Bildern wird das Verzeichnis der ursprünglich zugeschnittenen Bilder gelöscht, um Platz zu sparen. Den spezifischen Implementierungscode finden Sie in diesem Artikel. Ich hoffe, er kann Ihnen helfen.
Grundlegendes VUE3-Tutorial: Verwenden Sie das Vue.js-Plug-in, um die Bild-Upload-Komponente zu kapseln
15 Jun 2023
Grundlegendes VUE3-Tutorial: Verwenden Sie das Vue.js-Plug-in, um die Bild-Upload-Komponente zu kapseln. Vue.js ist ein beliebtes Front-End-Framework, mit dem Entwickler effizientere und flexiblere Anwendungen mit weniger Code erstellen können. Insbesondere nach der Veröffentlichung von Vue.js3 haben seine Optimierungen und Verbesserungen dazu geführt, dass immer mehr Entwickler dazu neigen, es zu verwenden. In diesem Artikel wird erläutert, wie Sie mit Vue.js3 ein Plug-In für Bild-Upload-Komponenten kapseln. Bevor Sie beginnen, müssen Sie sicherstellen, dass Vue.js und VueCLI installiert sind. Falls noch nicht installiert
Das Uploadify-Plug-in ermöglicht die Batch-Upload-Funktion mit Fortschrittsbalken
26 Apr 2018
Dieses Mal zeige ich Ihnen die Batch-Upload-Funktion des Uploadify-Plug-Ins mit Fortschrittsbalken. Was sind die Vorsichtsmaßnahmen für die Batch-Upload-Funktion des Uploadify-Plug-Ins mit Fortschrittsbalken?
16 May 2016
In diesem Artikel wird hauptsächlich das JQuery-Plug-In „Uploadify“ vorgestellt, mit dem der Stapel-Upload von Dateien mit Fortschrittsbalken implementiert werden kann.
Detaillierte Einführung in HTML5+CSS3 zur Realisierung des Drag-and-Drop-Uploads von Bildern ohne Plug-in (unterstützt Vorschau und Batch)
15 Mar 2017
In diesem Artikel wird hauptsächlich HTML5+CSS3 vorgestellt, um das Hochladen von Bildern per Drag-and-Drop ohne Plug-Ins zu implementieren (unterstützt Vorschau und Batch). Jetzt bietet HTML5 APIs und leistungsstarke APIs wie File, FileReader, XMLHttpRequest usw., die dies ermöglichen Damit wir Drag-and-Drop-Uploads durchführen können. Wer Interesse hat, kann sich informieren.
Organisieren von Spezialeffekten für Textschaltflächen basierend auf jQuery_jquery
16 May 2016
Hier haben wir 10 beliebte Codes für Text, Schaltflächen, Formulare und andere Spezialeffekte auf Basis von jQuery zusammengestellt. Sie sind zum einfachen Vergleich und zur Verwendung zusammengestellt.
Beschreiben Sie Canvas in Kombination mit JavaScript, um Bildspezialeffekte zu erzielen
07 Mar 2018
Wir alle wissen, dass Canvas viele Spezialeffekte und andere magische Dinge erzeugen kann. Aber haben Sie schon einmal mit Canvas und JavaScript gespielt, um Bildspezialeffekte zu erzielen? sehen!
Implementierung von Spezialeffekten wie Sonnenlicht und Regentropfen in Vue-Statistikdiagrammen
27 Aug 2023
Spezialeffekte wie Sonnenlicht und Regentropfen in Vue-Statistikdiagrammen werden in die Datenvisualisierung implementiert. Statistische Diagramme sind eine häufig verwendete Methode zur Darstellung von Daten. Um jedoch das visuelle Erlebnis des Benutzers zu verbessern, können wir den statistischen Diagrammen einige Spezialeffekte hinzufügen, z. B. Sonnenlicht, Regentropfen und andere Effekte. In diesem Artikel wird erläutert, wie Sie Vue zum Implementieren dieser Spezialeffekte verwenden, und es werden Codebeispiele bereitgestellt. Zuerst müssen wir Vue und Echarts installieren. Sie können den Befehl npm zur Installation verwenden: npminstallvueecharts--save
Hot Tools
jQuery+Html5 realisiert einen wunderschönen Geständnis-Animationscode
jQuery + Html5 implementiert einen wunderschönen Geständnis-Animationscode, der Animationseffekt ist großartig, ein Muss für Programmierer zum Geständnis!
Js-Spezialeffektcode für das romantische Geständnis eines Paares
Paar romantisches Geständnis JS Special Effekt -Code, solche Spezialeffekte, können auf Websites für Hochzeitsfotografie verwendet werden, können auch in persönlichen Websites platziert werden, und auch eine gute Spezialeffekte, PHP Chinese -Website -Empfehlung Download!
Einfaches JS-Liebesgeständnis-Artefakt
Einfaches natives JS-Liebesgeständnis-Artefakt
Ausdrucksstarke HTML5-Partikelanimationseffekte von Bunker
Bunkers HTML5-Spezialeffektcode für Partikelanimationsausdrücke, der Text für Animationsspezialeffekte kann im Code geändert werden, Sie können eine Seite erstellen, Sie können die Texteingabe anpassen, es sollte sehr beliebt sein, dieser HTML5-Spezialeffekt ist sehr schön.
jQuery-Responsive Hintergrund-Anmeldeschnittstellenvorlage
HTML-Quellcode der responsiven Backend-Anmeldeschnittstelle von jQuery. Die Anmeldeseite verwendet JQuery, um das Formular zu überprüfen und festzustellen, ob die Anmeldeseite die Anforderungen erfüllt Seiten: Wenn der Browser hinein- oder herauszoomt, ändert der Hintergrund die Größe des Bildes entsprechend dem Browser! Die chinesische PHP-Website empfiehlt den Download!