Maison

Effets spéciaux JS

effets jQuery

Téléchargement par lots d'images Vue-js

Télécharger maintenant Aperçu

<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}}

Il s'agit d'un téléchargement par lots d'images vue-js. Les amis qui en ont besoin peuvent le télécharger et l'utiliser.

Clause de non-responsabilité

Toutes les ressources de ce site proviennent d'internautes ou sont réimprimées par les principaux sites de téléchargement. Veuillez vérifier vous-même l'intégrité du logiciel ! Toutes les ressources de ce site sont uniquement à titre de référence d'apprentissage. Merci de ne pas les utiliser à des fins commerciales. Sinon, vous serez responsable de toutes les conséquences ! En cas d'infraction, veuillez nous contacter pour la supprimer. Coordonnées : admin@php.cn

Article connexe

Plug-in js de téléchargement par lots d'images imgFileupload.js

30 Nov 2019

Cet article explique comment utiliser imgFileupload.js, un plug-in de téléchargement par lots d'images. J'espère qu'il sera utile aux étudiants qui apprennent js. Sélectionnez les images par lots, limitez les types d'images via Accepter et limitez la taille d'un seul fichier via FileSize.

Comment utiliser le téléchargement par lots d'images Fatkun Comment utiliser le téléchargement par lots d'images Fatkun

02 Sep 2024

Récemment, de nombreux amis ont demandé à l'éditeur comment utiliser le téléchargement par lots d'images Fatkun. Apprenons ensuite comment utiliser le téléchargement par lots d'images Fatkun. J'espère que cela pourra aider tout le monde. Comment utiliser le téléchargement par lots d'images Fatkun ? Comment utiliser le téléchargement par lots d'images Fatkun 1. Tout d'abord, faites glisser le téléchargement par lots d'images Fatkun téléchargé dans le navigateur (cette étape peut également double-cliquer avec la souris et choisir d'utiliser le navigateur pour l'ouvrir), cliquez sur [Ajouter] pour terminer l'installation. , comme le montre la figure ci-dessous Afficher. 2. Ensuite, il sera affiché dans la barre d'extension. Après avoir ouvert l'onglet, cliquez sur le bouton pour sélectionner l'onglet à télécharger, comme indiqué dans la figure ci-dessous. 3. Dans la gestion des extensions, cliquez sur [Options] pour la définir, comme indiqué ci-dessous

Téléchargement par lots d'images php+WebUploader

19 Jun 2019

Webuploader est principalement utilisé pour télécharger des fichiers. Il prend en charge le téléchargement par lots et l'aperçu de l'image génère des données base64 à partir de l'image et les utilise directement dans la balise, de sorte que l'effet qui peut être obtenu est que vous pouvez voir l'effet de téléchargement avant de télécharger réellement. l'image.

Code de méthode TP5 pour le téléchargement d'images par lots

20 Aug 2018

Le contenu de cet article concerne le code de la méthode tp5 pour télécharger des images. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Exemple de code de téléchargement par lots d'images et de fichiers Thinkphp

04 Aug 2018

Cet article vous apporte des exemples de code sur le téléchargement par lots d'images et de fichiers dans Thinkphp. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Le framework thinkPHP5 intègre plupload pour réaliser le téléchargement par lots d'images

04 May 2018

Cet article présente principalement le framework thinkPHP5 intégrant plupload pour réaliser le téléchargement par lots d'images. Il a une certaine valeur de référence. Maintenant, je le partage avec vous.

Comment écrire du code pour le téléchargement par lots de vue

08 May 2023

Ces dernières années, les frameworks front-end sont devenus l'outil de choix pour de nombreux développeurs front-end, parmi lesquels vue.js est privilégié par les développeurs pour sa courbe d'apprentissage facile et sa maintenance aisée. Dans vue.js, l'implémentation de la fonction de téléchargement de fichiers est l'une des exigences les plus courantes, et le téléchargement par lots est utilisé par divers sites Web. Alors, comment implémenter le téléchargement par lots dans vue.js ? Ce qui suit présentera en détail comment vue.js implémente les téléchargements par lots. 1. Téléchargement simple de fichiers Avant d'introduire le téléchargement par lots, jetons d'abord un coup d'œil à l'implémentation simple du téléchargement de fichiers uniques dans vue.js.

Utilisez Python pour vous interfacer avec Qiniu Cloud afin d'implémenter le téléchargement par lots d'images

06 Jul 2023

Utilisez Python pour vous interfacer avec Qiniu Cloud afin de réaliser le téléchargement par lots d'images 1. Introduction Avec le développement d'Internet, l'utilisation d'images devient de plus en plus répandue. Dans de nombreux scénarios d’application, nous devons télécharger un grand nombre d’images sur le serveur. Qiniu Cloud Storage est un service de stockage d'objets distribué hautes performances, hautement fiable et évolutif de manière élastique qui fournit le stockage d'images, le traitement d'images en ligne, l'accélération CDN et d'autres fonctions. Cet article expliquera comment utiliser Python pour s'interfacer avec Qiniu Cloud afin de réaliser le téléchargement par lots d'images. 2. Travail de préparation Enregistrez le compte Qiniu Cloud et obtenez

Comment utiliser Vue pour implémenter le téléchargement d'images par glisser-déposer

07 Nov 2023

Comment utiliser Vue pour implémenter le téléchargement d'images par glisser-déposer Introduction : À l'ère d'Internet d'aujourd'hui, la fonction de téléchargement d'images est devenue l'une des fonctions nécessaires pour de nombreux sites Web et applications. Avec le développement continu de la technologie, l’expérience utilisateur est devenue ce sur quoi les développeurs doivent se concentrer. Cet article expliquera comment utiliser Vue pour implémenter une simple fonction glisser-déposer pour télécharger des images et fournira des exemples de code spécifiques. 1. Analyse des exigences Avant de commencer à écrire du code, nous devons clarifier nos exigences : les utilisateurs peuvent faire glisser les fichiers image locaux vers une zone spécifique pour les télécharger.

See all articles

Hot tools Tags

Éditeurs PHP

Outils de développement

PHP IDE

Cadre PHP

PHP debugging tools

PHP extensions

Hot Tools

jQuery2019 Effets spéciaux d'animation de feux d'artifice de confession de la Saint-Valentin

Un effet spécial d'animation de feux d'artifice de confession jQuery pour la Saint-Valentin très populaire sur Douyin, adapté aux programmeurs et aux geeks techniques pour exprimer leur amour à la fille qu'ils aiment. Peu importe que vous choisissiez de l'aimer ou non, vous devez finalement être d'accord.