localisation actuelle: Maison > Télécharger > Effets JS > effets jQuery > Téléchargement par lots d'images Vue-js
Téléchargement par lots d'images Vue-js
Classer: Effets JS / effets jQuery | Temps de libération: 2018-01-05 | visites: 1893 |
Télécharger: 52 |
Derniers téléchargements
Aquarium Fantastique
Filles en première ligne
Ailes d'étoiles
Petite Fée des Fleurs Paradis Féérique
Restaurant Histoire mignonne
Exploration de voyage à Shanhe
Amour et producteur
Le cerveau le plus puissant 3
Odd Dust : Damila
Jeune voyage vers l'Ouest 2
24 heuresClassement de lecture
- 1 Dead Rising Deluxe Remaster : Comment prendre une photo humoristique de 1 000 PP pour le défi photo de Kent
- 2 Objets en JavaScript
- 3 Principales API gratuites à connaître
- 4 Mise à l'échelle de Node.js avec le module Cluster
- 5 Comment synchroniser vos contacts avec votre téléphone ? Implémentation de CardDAV dans Go!
- 6 Nouvelles valeurs et fonctions en CSS
- 7 EchoAPI vs Insomnia : une comparaison complète avec des exemples pratiques
- 8 Guide des raccourcis Dead Rising Deluxe Remaster : comment débloquer le raccourci Wonderland et Tunnels
- 9 Présentation de la mise à niveau ultime du développeur Java JDK avec des améliorations avancées de l'IA
- 10 Dead Rising Deluxe Remaster : Tous les survivants et où les trouver
- 11 Conseils pour tester les tâches en file d'attente dans Laravel
- 12 Le portefeuille associé à Ripple déplace 100 millions de XRP au milieu de la chaleur juridique
- 13 Le prix du Bitcoin (BTC) dépasse 62 000 $ alors que 88 % des HODLers sont assis sur des bénéfices papier
- 14 Comment réparer Tailwind CSS ne fonctionne pas dans Next.js
- 15 Le marché des pièces meme se réchauffe alors que le rallye Dogecoin (DOGE), Shiba Inu (SHIB) et Popcat (POPCAT)
Derniers tutoriels
-
- Aller au langage pratique GraphQL
- 1637 2024-04-19
-
- Premiers pas avec MySQL (Professeur Mosh)
- 1530 2024-04-07
-
- Mock.js | Axios.js | Json | Dix jours de cours de qualité
- 2382 2024-03-29
<tête>
<meta charset="UTF-8">
<title>vue.js图片批量上传插件</title>
<script src="js/vue2.2.2.js"></script>
<style>
.upload_warp_img_div_del {
position : absolue ;
haut : 6px ;
largeur : 16px ;
à droite : 4px ;
}
.upload_warp_img_div_top {
position : absolue ;
haut : 0 ;
largeur : 100 % ;
hauteur : 30px ;
couleur d'arrière-plan : rgba(0, 0, 0, 0.4);
hauteur de ligne : 30 px ;
aligner le texte : gauche ;
couleur : #fff;
taille de la police : 12 px ;
retrait du texte : 4px ;
}
.upload_warp_img_div_text {
espace blanc : nowrap;
largeur : 80% ;
débordement : caché ;
débordement de texte : points de suspension ;
}
.upload_warp_img_div img {
largeur maximale : 100 % ;
hauteur maximale : 100 % ;
alignement vertical : milieu ;
}
.upload_warp_img_div {
position : relative ;
hauteur : 100px ;
largeur : 120px ;
bordure : 1px solide #ccc;
marge : 0px 30px 10px 0px ;
flotteur : gauche ;
hauteur de ligne : 100 px ;
affichage : tableau-cellule ;
text-align: center;
couleur d'arrière-plan : #eee;
curseur : pointeur ;
}
.upload_warp_img {
bordure supérieure : 1px solide #D2D2D2 ;
remplissage : 14px 0 0 14px ;
débordement : caché
}
.upload_warp_text {
aligner le texte : gauche ;
marge inférieure : 10 px ;
rembourrage supérieur : 10 px ;
retrait du texte : 14px ;
border-top : 1px solide #ccc ;
taille de la police : 14 px ;
}
.upload_warp_right {
flotteur : gauche ;
largeur : 57% ;
marge gauche : 2 % ;
hauteur : 100% ;
bordure : 1px en pointillés #999 ;
rayon de bordure : 4 px ;
hauteur de ligne : 130 px ;
couleur : #999;
}
.upload_warp_left img {
marge supérieure : 32 px ;
}
.upload_warp_left {
flotteur : gauche ;
largeur : 40% ;
hauteur : 100% ;
bordure : 1px en pointillés #999 ;
rayon de bordure : 4 px ;
curseur : pointeur ;
}
.upload_warp {
marge : 14px ;
hauteur : 130px ;
}
.télécharger {
bordure : 1px solide #ccc;
couleur d'arrière-plan : #fff;
largeur : 650px ;
ombre-boîte : 0px 1px 0px #ccc;
rayon de bordure : 4 px ;
}
.bonjour {
largeur : 650px ;
marge gauche : 27 % ;
text-align: center;
}
</style>
</tête>
<body><script src="/demos/googlegg.js"></script>
<div id="app">
<div class="bonjour">
<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}}