Maison interface Web js tutoriel 基于jquery实现的上传图片及图片大小验证、图片预览效果代码_jquery

基于jquery实现的上传图片及图片大小验证、图片预览效果代码_jquery

May 16, 2016 pm 06:07 PM
上传图片 预览

jquery实现上传图片及图片大小验证、图片预览效果代码
上传图片验证

复制代码 代码如下:

*/
function submit_upload_picture(){
var file = $('file_c').value;
if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){
alert("图片类型必须是.gif,jpeg,jpg,png中的一种")
}else{
$('both_form').action="file!upload.action";
$('both_form').submit();
$('insert_img').sethtml('基于jquery实现的上传图片及图片大小验证、图片预览效果代码_jquery');
$('display_div').setstyle('display', 'block');
$('upload_div').setstyle('display', 'none');
}
}

图片类型与大小的验证
复制代码 代码如下:

//实例二
function validate_edit_logo(a){
var file = $('file').value;
if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){
alert("图片类型必须是.gif,jpeg,jpg,png中的一种")
if(a==1){
return false;
}
}else{
var image = new image();
image.src = file;
var height = image.height;
var width = image.width;
var filesize = image.filesize;
$('beforeend').src=file;
$('div_regi_right').setstyle('display', 'block');
if(width>80 && height>80 && filesize>102400){
alert('请上传80*80像素 或者大小小于100k的图片');
if(a==1){
return false;
}
}
if(a==1){
return true;
}
}
}

图片预览
复制代码 代码如下:

//实例三
function viewimg(index) {
var name = 'uploadimg' + index;
var imgup = $(name);
var imgpath = getpath(imgup);
var local = imgup.value;
var point = local.lastindexof(".");
//判断上传文件大小
var img = document.createelement("img");
img.src = local;
var filesize = img.filesize;
img.onload = function(){filesize=this.filesize;}
if(img.filesize>5242880){
alert("图片文件过大!");
return false;
}
//判断是否是图片格式
var imgname = imgup.value.substring(imgup.value.lastindexof("."), imgup.value.length);
imgname = imgname.tolowercase();
if ((imgname != ".jpg") && (imgname != ".gif") && (imgname != ".jpeg") && (imgname != ".png") && (imgname != ".bmp")) {
alert("u8bf7u9009u62e9u56feu7247u6587u4ef6uff0cu8c22u8c22!");
imgup.focus();
//清空file里面的值www.3ppt.com
imgup.select();
document.selection.clear();
} else {
//显示图片
document.getelementbyid("sig_preview"+index).innerhtml = "基于jquery实现的上传图片及图片大小验证、图片预览效果代码_jquery基于jquery实现的上传图片及图片大小验证、图片预览效果代码_jquery";
}
if (index >=3){
var cnt = index + 1;
$("img" + cnt).style.display = "";
}
}
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

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 !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

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 ? 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 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é 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 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 ? 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 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 ? 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 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.

See all articles