Heim

JS-Spezialeffekte

jQuery-Effekte

Batch-Upload von Vue-js-Bildern

Jetzt downloaden Vorschau

<Kopf>
<meta charset="UTF-8">
<title>vue.js图片批量上传插件</title>
<script src="js/vue2.2.2.js"></script>
<Stil>
.upload_warp_img_div_del {
Position: absolut;
oben: 6px;
Breite: 16px;
rechts: 4px;
}

.upload_warp_img_div_top {
Position: absolut;
oben: 0;
Breite: 100 %;
Höhe: 30px;
Hintergrundfarbe: rgba(0, 0, 0, 0.4);
Zeilenhöhe: 30px;
Textausrichtung: links;
Farbe: #fff;
Schriftgröße: 12px;
Texteinzug: 4px;
}

.upload_warp_img_div_text {
Leerraum: nowrap;
Breite: 80 %;
Überlauf: versteckt;
Textüberlauf: Auslassungspunkte;
}
.upload_warp_img_div img {
maximale Breite: 100 %;
maximale Höhe: 100 %;
vertikal ausrichten: Mitte;
}

.upload_warp_img_div {
Position: relativ;
Höhe: 100px;
Breite: 120px;
Rand: 1px fest #ccc;
Rand: 0px 30px 10px 0px;
float: links;
Zeilenhöhe: 100px;
Anzeige: Tabellenzelle;
text-align: center;
Hintergrundfarbe: #eee;
Cursor: Zeiger;
}

.upload_warp_img {
Rand oben: 1 Pixel durchgehend #D2D2D2;
Polsterung: 14px 0 0 14px;
Überlauf: versteckt
}

.upload_warp_text {
Textausrichtung: links;
Rand unten: 10px;
padding-top: 10px;
Texteinzug: 14px;
border-top: 1px einfarbig #ccc;
Schriftgröße: 14px;
}

.upload_warp_right {
float: links;
Breite: 57 %;
Rand links: 2 %;
Höhe: 100 %;
Rand: 1px gestrichelt #999;
Randradius: 4px;
Zeilenhöhe: 130px;
Farbe: #999;
}

.upload_warp_left img {
Rand oben: 32px;
}

.upload_warp_left {
float: links;
Breite: 40 %;
Höhe: 100 %;
Rand: 1px gestrichelt #999;
Randradius: 4px;
Cursor: Zeiger;
}

.upload_warp {
Rand: 14px;
Höhe: 130px;
}

.hochladen {
Rand: 1px fest #ccc;
Hintergrundfarbe: #fff;
Breite: 650px;
box-shadow: 0px 1px 0px #ccc;
Randradius: 4px;
}

.Hallo {
Breite: 650px;
Rand links: 27 %;
text-align: center;
}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<div id="app">
<div class="hello">
<div class="upload">
<div class="upload_warp">
<div class="upload_warp_left" @click="fileClick">
<img src="./upload.png">
</div>
<div class="upload_warp_right" @drop="drop($event)" @dragenter="dragenter($event)" @dragover="dragover($event)">
或者将文件拖到此处
</div>
</div>
<div class="upload_warp_text">
选中{{imgList.length}}张文件，共{{bytesToSize(this.size)}}
</div>
<input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none">
<div class="upload_warp_img" v-show="imgList.length!=0">
         <div class="upload_warp_img_div" v-for="(item,index) of imgList">
           <div class="upload_warp_img_div_top">
              <div class="upload_warp_img_div_text">
                     {{item.file.name}}

Dies ist ein Vue-JS-Bild-Batch-Upload. Freunde, die es benötigen, können es herunterladen und verwenden.

Haftungsausschluss

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

Das thinkPHP5-Framework integriert plupload, um einen Batch-Upload von Bildern zu ermöglichen

04 May 2018

In diesem Artikel wird hauptsächlich das thinkPHP5-Framework vorgestellt, das den Batch-Upload von Bildern ermöglicht. Jetzt kann ich es mit Ihnen teilen.

Mit PHP entwickelte Second-Hand-Recycling-Website unterstützt das Batch-Upload von Bildern

02 Jul 2023

Die mit PHP entwickelte Second-Hand-Recycling-Website unterstützt das Batch-Upload von Bildern. Mit den Veränderungen im sozialen Umfeld und der Verbesserung des Bewusstseins der Menschen für den Umweltschutz entsteht nach und nach die Second-Hand-Recyclingbranche. Um es allen einfacher zu machen, ungenutzte Gegenstände zu recyceln, haben wir beschlossen, eine Website zum Recycling gebrauchter Gegenstände zu entwickeln. Diese Website unterstützt Benutzer beim stapelweisen Hochladen von Bildern, um den Zustand der Artikel besser anzuzeigen und das Verständnis und Interesse der Benutzer für die Artikel zu steigern. Bevor wir die Funktion zum Hochladen von Bildern im Stapel implementieren, müssen wir sicherstellen, dass die Grundstruktur der Website erstellt wurde. Dazu gehören Datenbankdesign und -einrichtung sowie Benutzerkonten

Verwenden Sie Python als Schnittstelle mit Qiniu Cloud, um den Batch-Upload von Bildern zu implementieren

06 Jul 2023

Verwenden Sie Python als Schnittstelle zu Qiniu Cloud, um einen Batch-Upload von Bildern zu realisieren. 1. Einführung Mit der Entwicklung des Internets wird die Verwendung von Bildern immer weiter verbreitet. In vielen Anwendungsszenarien müssen wir eine große Anzahl von Bildern auf den Server hochladen. Qiniu Cloud Storage ist ein leistungsstarker, äußerst zuverlässiger und elastisch skalierbarer verteilter Objektspeicherdienst, der Bildspeicherung, Online-Bildverarbeitung, CDN-Beschleunigung und andere Funktionen bietet. In diesem Artikel wird erläutert, wie Sie mithilfe von Python eine Verbindung mit der Qiniu Cloud-Schnittstelle herstellen und einen Batch-Upload von Bildern durchführen können. 2. Vorbereitungsarbeiten Registrieren Sie ein Qiniu Cloud-Konto und erhalten Sie es

CSS3-Animation VS jQuery-Effekte: Welche Technologie eignet sich besser, um verschiedene dynamische Effekte zu erzielen?

11 Sep 2023

CSS3-Animation VS jQuery-Effekte: Welche Technologie eignet sich besser, um verschiedene dynamische Effekte zu erzielen? Mit der rasanten Entwicklung des Internets und der zunehmenden Bedeutung der Website-Benutzererfahrung spielen dynamische Effekte eine wichtige Rolle im modernen Webdesign. Um vielfältige dynamische Effekte zu erzielen, können Entwickler wahlweise CSS3-Animationen oder jQuery-Effekte verwenden. In diesem Artikel werden wir untersuchen, welche Technik besser geeignet ist, um verschiedene dynamische Effekte zu erzielen. CSS3-Animation ist eine Technologie, die mithilfe von CSS-Stilen verschiedene Animationseffekte erzeugt. C

jQuery-Fokusveranstaltung enthüllt: Schlüsseltechniken zur Implementierung interaktiver Effekte

26 Feb 2024

Enthüllung der Geheimnisse von jQuery-Fokusereignissen: Schlüsseltechniken zum Erzielen interaktiver Effekte jQuery ist eine beliebte JavaScript-Bibliothek, die viele prägnante und leistungsstarke Methoden zum Bearbeiten von HTML-Elementen und zum Erzielen umfangreicher interaktiver Effekte bereitstellt. Unter ihnen sind Fokusveranstaltungen eine der Schlüsseltechniken, um interaktive Effekte zu erzielen. Dieser Artikel befasst sich mit den Fokusereignissen in jQuery und führt Sie in Kombination mit spezifischen Codebeispielen dazu, die Geheimnisse von Fokusereignissen aufzudecken. 1. Fokusereignisse verstehen In jQuery umfassen Fokusereignisse Fokus,

Sie müssen sich nicht entscheiden: So kombinieren Sie geschickt CSS3-Animationen und jQuery-Effekte, um eine hocheffiziente Webseite zu erstellen

08 Sep 2023

Sie müssen sich nicht entscheiden: Wie Sie CSS3-Animationen und jQuery-Effekte geschickt kombinieren, um eine hochwirksame Webseite zu erstellen. Im heutigen hochentwickelten Internetzeitalter ist Webdesign zu einem der Schlüsselelemente geworden, die den Benutzern ein glückliches und einprägsames Gefühl vermitteln. Um dieses Ziel zu erreichen, haben viele Front-End-Entwickler damit begonnen, CSS3-Animationen und jQuery-Effekte sinnvoll zu nutzen, um die visuellen Effekte und das Benutzererlebnis von Webseiten zu verbessern. In diesem Artikel erfahren Sie, wie Sie CSS3-Animationen und jQuery-Effekte geschickt kombinieren, um eine äußerst effektive Webseite zu erstellen, und fügen Codebeispiele hinzu. Verwenden Sie CSS

Einfache Implementierung herzförmiger Jquery-Like- und Follow-Effekte

07 Dec 2016

Einfache Implementierung herzförmiger Jquery-Like- und Follow-Effekte

So implementieren Sie die Funktion zum Zuschneiden und Hochladen von Bildern in js über Vue in Cropper

02 Jun 2018

In diesem Artikel werden hauptsächlich relevante Informationen zur Bildzuschneide- und Hochladefunktion von Cropper js basierend auf Vue vorgestellt. Freunde in Not können darauf verweisen.

Teilen Sie 33 wunderschöne Maus-Hover-Effekte, die mit jQuery und CSS3_jquery implementiert wurden

16 May 2016

Heute haben wir 33 wunderschöne Maus-Hover-Effekte mit jQuery und CSS3 zusammengestellt. Einige davon sind reines CSS3. Sie können diese Effekte auf Ihren Webseiten verwenden, um Ihrer Website ein besseres Erlebnis zu verleihen.

See all articles

Hot-Tools-Tags

PHP-Editoren

Entwicklungswerkzeuge

PHP IDE

PHP-Framework

PHP debugging tools

PHP extensions

Hot Tools

jQuery2019 Valentinstag-Geständnis-Feuerwerk-Animations-Spezialeffekte

Ein sehr beliebter jQuery-Spezialeffekt mit Geständnisfeuerwerk zum Valentinstag auf Douyin, der für Programmierer und Technikfreaks geeignet ist, um dem Mädchen, das sie lieben, ihre Liebe auszudrücken. Egal, ob Sie es mögen oder nicht, am Ende müssen Sie zustimmen.