interface Web
js tutoriel
Télécharger l'aperçu de l'image Script JS Fichier d'entrée Implémentation de l'aperçu de l'image Compétences example_javascript
Télécharger l'aperçu de l'image Script JS Fichier d'entrée Implémentation de l'aperçu de l'image Compétences example_javascript
Lorsque nous travaillons sur un projet à Shenzhen, nous avons besoin d'une fonction permettant aux utilisateurs de télécharger des aperçus d'avatar ! J'ai beaucoup cherché en ligne, mais je ne suis pas très satisfait. Soit c'est du flash, soit il renvoie le chemin de l'image après le téléchargement Ajax, soit il est tout simplement inutilisable. Heureusement, quelqu'un avait écrit une fonction d'aperçu d'image avant ce projet, et je l'ai déterré ici pour ma propre commodité à l'avenir, et pour la commodité des autres amis qui en ont besoin !
Le code est très simple, comme suit :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>By：DragonDean</title>
<script type="text/javascript">
//下面用于图片上传预览功能
function setImagePreview(avalue) {
var docObj=document.getElementById("doc");
var imgObjPreview=document.getElementById("preview");
if(docObj.files &&docObj.files[0])
{
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '150px';
imgObjPreview.style.height = '180px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
else
{
//IE下，使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "150px";
localImagId.style.height = "180px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
try{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch(e)
{
alert("您上传的图片格式不正确，请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="101" align="center">
<div id="localImag"><img id="preview" src="http://blog.chuangling.net/Public/images/top.jpg" width="150" height="180" style="display: block; width: 150px; height: 180px;"></div>
</td>
</tr>
<tr>
<td align="center" style="padding-top:10px;"><input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();"></td>
</tr>
</tbody>
</table>
</body>
</html>Le test fonctionne sur IE8, FF12.0 et Google Chrome 28.0.1500.72 !
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
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
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)
Comment implémenter le défilement des images et l'aperçu des vignettes dans Vue ?
Aug 18, 2023 pm 01:51 PM
Comment implémenter le défilement des images et l'aperçu des vignettes dans Vue ? Dans les projets Vue, nous devons souvent afficher un grand nombre d'images et espérer que les utilisateurs pourront parcourir et prévisualiser ces images facilement. Cet article explique comment utiliser les composants Vue pour implémenter les fonctions de défilement d'images et d'aperçu des vignettes. Tout d'abord, nous devons installer et introduire la bibliothèque Vue appropriée pour faciliter le défilement des images et l'aperçu des vignettes. Dans cet exemple, nous utiliserons les deux bibliothèques vue-awesome-swiper et vue-image-preview pour implémenter
Comment publier des photos sur les commentaires Douyin
Feb 19, 2024 pm 01:10 PM
En tant que l'une des plateformes de partage de courtes vidéos les plus populaires au monde, Douyin a attiré des centaines de millions d'utilisateurs à la rejoindre. Lorsque nous regardons les œuvres merveilleuses des autres, nous sommes souvent émus par certains moments dynamiques, intéressants ou significatifs. À l'heure actuelle, nous pouvons non seulement exprimer nos opinions et nos pensées à travers des commentaires textuels, mais également exprimer nos émotions de manière plus vivante à travers des commentaires d'images. Alors, comment publier des commentaires photo sur TikTok ? Tout d'abord, ouvrez l'application Douyin et entrez la vidéo qui vous intéresse. Ensuite, nous devons dépendre des différents systèmes d’exploitation du téléphone mobile.
Accès anticipé aux futures fonctionnalités Safari Technology Preview 173 publié
Jul 02, 2023 pm 01:37 PM
Apple a publié aujourd'hui la version 173 de Safari Technology Preview, qui couvre certaines fonctionnalités susceptibles d'être lancées dans Safari 17. Cette version convient à la version bêta de macOS Sonoma et au système macOS Ventura. Les utilisateurs intéressés peuvent la télécharger sur le site officiel. Safari Technology Preview version 173 ajoute un bloc d'indicateur de fonctionnalité dans les paramètres, remplaçant la fonctionnalité expérimentale dans le menu de développement d'origine. Cette section permet aux développeurs de rechercher rapidement des fonctionnalités spécifiques et marque le statut comme « stable », « disponible pour les tests », « aperçu » ou « développeur » sous différentes formes. Le menu de développement repensé permet aux créateurs de trouver plus facilement les outils clés pour créer des pages Web, des applications Web, du contenu Web dans d'autres applications,
Comment implémenter le téléchargement et l'aperçu d'images de formulaire dans le traitement des formulaires Vue
Aug 10, 2023 am 11:57 AM
Comment implémenter le téléchargement et l'aperçu d'images de formulaire dans le traitement de formulaire Vue Introduction : Dans les applications Web modernes, le traitement de formulaire est une exigence très courante. Une exigence courante consiste à permettre aux utilisateurs de télécharger des images et de les prévisualiser dans un formulaire. En tant que framework front-end, Vue.js nous fournit une multitude d'outils et de méthodes pour répondre à cette exigence. Dans cet article, je vais vous montrer comment implémenter les fonctions de téléchargement et d'aperçu d'images dans le traitement des formulaires Vue. Étape 1 : Définir les composants Vue Tout d'abord, nous devons définir un groupe Vue
Comment télécharger et prévisualiser des images via Vue ?
Aug 19, 2023 pm 09:25 PM
Comment télécharger et prévisualiser des images via Vue ? Présentation : dans les applications Web modernes, le téléchargement et la prévisualisation d'images sont une exigence courante. Vue, en tant que framework JavaScript populaire, fournit un moyen pratique d'atteindre cette fonction. Cet article expliquera comment utiliser Vue pour télécharger et prévisualiser des images, y compris la conception de l'interface frontale et le traitement de l'interface back-end. Conception de l’interface frontale : Tout d’abord, nous devons concevoir une interface frontale pour sélectionner et télécharger des images. Dans Vue, nous pouvons utiliser <i
Comment implémenter le téléchargement et l'aperçu d'images dans Uniapp
Oct 21, 2023 am 11:48 AM
Comment implémenter le téléchargement et l'aperçu d'images dans uniapp Dans les applications modernes de réseaux sociaux et de commerce électronique, les fonctions de téléchargement et d'aperçu d'images sont des exigences très courantes. Cet article expliquera comment implémenter les fonctions de téléchargement et de prévisualisation d'images dans uniapp, et donnera des exemples de code spécifiques. 1. Implémentation de la fonction de téléchargement d'images Dans le projet uniapp, vous devez d'abord ajouter un composant de téléchargement d'images à la page, comme indiqué ci-dessous : <template><view><im
Que dois-je faire si tout ne peut pas être affiché lors de la prévisualisation et de l'impression ?
Mar 01, 2023 pm 02:45 PM
Solution au problème selon lequel tout ne peut pas être affiché lors de la prévisualisation et de l'impression : 1. Ouvrez le formulaire WPS Office et cliquez sur « Aperçu avant impression » dans le coin supérieur gauche de la zone de la barre de travail. 2. Accédez à la page d'aperçu avant impression et cliquez sur « Rapport d'échelle » ; ; 3. Dans la liste déroulante qui apparaît, sélectionnez le rapport applicable parmi "Paysage" ou "Portrait".
Résoudre le problème de rapport d'erreurs du programme d'aperçu Win11
Jan 14, 2024 pm 05:33 PM
Nous pouvons mettre à jour et mettre à niveau le système Windows 11 dans le programme de prévisualisation du système Windows, mais de nombreux amis ont rencontré le code d'erreur 0x0 en rejoignant le programme de prévisualisation. C'est parce qu'il manque une partie du registre dans notre système. Pour le résoudre, examinons-le ensemble. Comment gérer les erreurs dans le programme d'aperçu win11 Méthode 1 : 1. Si notre système n'est pas la dernière version du système, nous pouvons essayer de le mettre à jour dans la mise à jour du système. Méthode 2 : 1. L’erreur peut également être un problème avec le registre. Nous pouvons essayer d’utiliser l’outil de réparation du registre pour la réparer. Troisième méthode : 1. Téléchargez le système win11 directement depuis ce site et installez-le. 2. Après le téléchargement, installez-le simplement selon le tutoriel fourni sur ce site.
