interface Web
js tutoriel
Explication détaillée du type d'entrée = fichier pour sélectionner des images et obtenir des effets de prévisualisation
Explication détaillée du type d'entrée = fichier pour sélectionner des images et obtenir des effets de prévisualisation
Cet article vous apporte principalement un exemple de sélection d'images avec input type=file et d'obtention d'effets de prévisualisation. L'éditeur pense que c'est plutôt bien, alors je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.
Grâce à la balise , spécifiez le type de fichier, qui peut permettre le téléchargement de fichiers.
accepter : vous pouvez choisir le type de téléchargement, tel que : télécharger simplement des images, et il n'y a aucune restriction Le format d'image est image/*;
multiple : spécifie si plusieurs fichiers peuvent être sélectionnés
spécifie que seules les images peuvent être téléchargées et que plusieurs fichiers peuvent être sélectionnés
<input type="file" accept="image/*" multiple="multiple"/>
Code HTML
fichier de style CSS<body> <p id="box"> <img id="imgshow" src="" alt=""/> </p> <p id="pox"> <input id="filed" type="file" accept="image/*"/> </p> </body>
<style>
#box{
width: 300px;
height: 300px;
border: 2px solid #858585;
}
#imgshow{
width: 100%;
height: 100%;
}
#pox{
width: 70px;
height: 24px;
overflow: hidden;
}
</style><script>
//在input file内容改变的时候触发事件
$('#filed').change(function(){
//获取input file的files文件数组;
//$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
//这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
var file = $('#filed').get(0).files[0];
//创建用来读取此文件的对象
var reader = new FileReader();
//使用该对象读取file文件
reader.readAsDataURL(file);
//读取文件成功后执行的方法函数
reader.onload=function(e){
//读取成功后返回的一个参数e，整个的一个进度事件
console.log(e);
//选择所要显示图片的img，要赋值给img的src就是e中target下result里面
//的base64编码格式的地址
$('#imgshow').get(0).src = e.target.result;
}
})
</script>
Tutoriel d'exemple de contrôle de fichiers pour sélectionner des images
Exemple de code HTML5 Plus pour mettre en œuvre la fonction de prise de photos ou de sélection de photos dans l'album à télécharger sur l'application mobile
Après avoir saisi l'image sélectionnée, elle ne sera pas téléchargée et affichée à temps
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Poésie aléatoire d'application native Hongmeng
Feb 19, 2024 pm 01:36 PM
Pour en savoir plus sur l'open source, veuillez visiter : 51CTO Hongmeng Developer Community https://ost.51cto.com Environnement d'exploitation DAYU200 : 4.0.10.16SDK : 4.0.10.15IDE : 4.0.600 1. Pour créer une application, cliquez sur Fichier- >nouveauFichier->CréerProgect. Sélectionnez le modèle : [OpenHarmony] EmptyAbility : indiquez le nom du projet, shici, le nom du package d'application com.nut.shici et l'emplacement de stockage de l'application XXX (pas de chinois, de caractères spéciaux ou d'espaces). CompileSDK10, modèle : étape. Appareil
Utilisez la fonction File.length() de Java pour obtenir la taille du fichier
Jul 24, 2023 am 08:36 AM
Utilisez la fonction File.length() de Java pour obtenir la taille d'un fichier. La taille du fichier est une exigence très courante lors des opérations sur les fichiers. Java fournit un moyen très pratique d'obtenir la taille d'un fichier, c'est-à-dire en utilisant la longueur (. ) méthode de la classe File . Cet article explique comment utiliser cette méthode pour obtenir la taille d'un fichier et donne des exemples de code correspondants. Tout d’abord, nous devons créer un objet File pour représenter le fichier dont nous voulons obtenir la taille. Voici comment créer un objet File : Filef
Comment convertir un blob php en fichier
Mar 16, 2023 am 10:47 AM
Comment convertir un blob php en fichier : 1. Créez un exemple de fichier php ; 2. Via "function blobToFile(blob) {return new File([blob], 'screenshot.png', { type: 'image/jpeg' }) } » peut être utilisée pour convertir un Blob en fichier.
Renommez les fichiers à l'aide de la fonction File.renameTo() de Java
Jul 25, 2023 pm 03:45 PM
Utilisez la fonction File.renameTo() de Java pour renommer des fichiers. En programmation Java, nous avons souvent besoin de renommer des fichiers. Java fournit la classe File pour gérer les opérations sur les fichiers, et sa fonction renameTo() peut facilement renommer les fichiers. Cet article explique comment utiliser la fonction File.renameTo() de Java pour renommer des fichiers et fournit des exemples de code correspondants. La fonction File.renameTo() est une méthode de la classe File.
Résoudre l'erreur de montage du disque dur mobile Ubuntu : type de système de fichiers inconnu exfat
Jan 05, 2024 pm 01:18 PM
Une erreur se produit lorsque Ubuntu monte un disque dur mobile : mount: unknownfilesystemtype'exfat' La méthode de traitement est la suivante : Ubuntu13.10 ou installez exfat-fuse : sudoapt-getinstallexfat-fuseUbuntu13.04 ou version antérieure sudoapt-add-repositoryppa:relan. /exfatsudoapt-getupdatesudoapt-getinstallfuse- exfatCentOS Linux montage solution d'erreur de disque USB au format exfat pour charger extfa dans CentOS
Quelles sont les utilisations du mot-clé Type dans Go ?
Sep 06, 2023 am 09:58 AM
L'utilisation du mot-clé Type dans Go inclut la définition de nouveaux alias de type ou la création de nouveaux types de structure. Introduction détaillée : 1. Alias de type. Utilisez le mot-clé "type" pour créer un alias pour un type existant. Cet alias ne crée pas un nouveau type, mais fournit uniquement un nouveau nom pour le type existant. Les alias de type peuvent améliorer le code. la lisibilité du code rend le code plus clair ; 2. Type de structure Utilisez le mot-clé "type" pour créer un nouveau type de structure qui peut être utilisé pour définir des types personnalisés contenant plusieurs champs, etc.
Comment encapsuler les composants d'entrée et les données de formulaire unifié dans vue3
May 12, 2023 pm 03:58 PM
Préparation Utilisez vuecreateexample pour créer un projet. Les paramètres sont à peu près les suivants : utiliser l'entrée native est principalement la valeur et le changement. Les données doivent être synchronisées lors du changement. App.tsx est le suivant : import{ref}from'vue';exportdefault{setup(){//username est la donnée constusername=ref('Zhang San');//Lorsque la zone de saisie change, synchronisez les données constonInput =;retour( )=>({
Utilisez la fonction File.getParent() de Java pour obtenir le chemin parent du fichier
Jul 24, 2023 pm 01:40 PM
Utilisez la fonction File.getParent() de Java pour obtenir le chemin parent d'un fichier. En programmation Java, nous avons souvent besoin d'exploiter des fichiers et des dossiers. Parfois, nous devons obtenir le chemin parent d’un fichier, qui est le chemin du dossier où se trouve le fichier. La classe File de Java fournit la méthode getParent() pour obtenir le chemin parent d'un fichier ou d'un dossier. La classe File est la représentation abstraite des fichiers et des dossiers en Java. Elle fournit une série de méthodes pour exploiter les fichiers et les dossiers. Parmi eux, obtenez
