Heim Web-Frontend js-Tutorial 基于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 = "";
}
}
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie implementiert man das Scrollen von Bildern und die Vorschau von Miniaturansichten in Vue? Wie implementiert man das Scrollen von Bildern und die Vorschau von Miniaturansichten in Vue? Aug 18, 2023 pm 01:51 PM

Wie implementiert man das Scrollen von Bildern und die Vorschau von Miniaturansichten in Vue? In Vue-Projekten müssen wir häufig eine große Anzahl von Bildern anzeigen und hoffen, dass Benutzer diese Bilder problemlos durchsuchen und in der Vorschau anzeigen können. In diesem Artikel wird erläutert, wie Vue-Komponenten zum Implementieren von Bildlauf- und Miniaturansichtsvorschaufunktionen verwendet werden. Zuerst müssen wir die entsprechende Vue-Bibliothek installieren und einführen, um das Scrollen von Bildern und die Vorschau von Miniaturansichten zu erleichtern. In diesem Beispiel verwenden wir zur Implementierung die beiden Bibliotheken vue-awesome-swiper und vue-image-preview

So posten Sie Bilder in Douyin-Kommentaren So posten Sie Bilder in Douyin-Kommentaren Feb 19, 2024 pm 01:10 PM

Als eine der beliebtesten Kurzvideo-Sharing-Plattformen der Welt hat Douyin Hunderte Millionen Nutzer angezogen. Wenn wir die wunderbaren Werke anderer Menschen betrachten, sind wir oft von einigen dynamischen, interessanten oder bedeutungsvollen Momenten darin berührt. Derzeit können wir unsere Meinungen und Gedanken nicht nur durch Textkommentare ausdrücken, sondern auch unsere Gefühle durch Bildkommentare lebendiger ausdrücken. Wie postet man also Bildkommentare auf TikTok? Öffnen Sie zunächst die Douyin-App und geben Sie das Video ein, an dem Sie interessiert sind. Als nächstes müssen wir das Betriebssystem des Mobiltelefons entsprechend bestimmen

Frühzeitiger Zugriff auf zukünftige Funktionen Safari Technology Preview 173 veröffentlicht Frühzeitiger Zugriff auf zukünftige Funktionen Safari Technology Preview 173 veröffentlicht Jul 02, 2023 pm 01:37 PM

Apple hat heute die Safari Technology Preview Version 173 veröffentlicht, die einige Funktionen abdeckt, die möglicherweise in Safari 17 eingeführt werden. Diese Version ist für die Betaversion von macOS Sonoma und das macOS Ventura-System geeignet. Interessierte Benutzer können sie von der offiziellen Website herunterladen. Safari Technology Preview Version 173 fügt einen Feature-Flag-Block in den Einstellungen hinzu und ersetzt die experimentelle Funktion im ursprünglichen Entwicklungsmenü. In diesem Abschnitt können Entwickler schnell nach bestimmten Funktionen suchen und den Status auf unterschiedliche Weise als „stabil“, „zum Testen verfügbar“, „Vorschau“ oder „Entwickler“ markieren. Das neu gestaltete Entwicklungsmenü erleichtert Entwicklern das Auffinden wichtiger Tools zum Erstellen von Webseiten, Web-Apps und Webinhalten in anderen Apps.

So implementieren Sie das Hochladen und die Vorschau von Formularbildern in der Vue-Formularverarbeitung So implementieren Sie das Hochladen und die Vorschau von Formularbildern in der Vue-Formularverarbeitung Aug 10, 2023 am 11:57 AM

So implementieren Sie das Hochladen und die Vorschau von Formularbildern in der Vue-Formularverarbeitung. Einführung: In modernen Webanwendungen ist die Formularverarbeitung eine sehr häufige Anforderung. Eine häufige Anforderung besteht darin, Benutzern das Hochladen von Bildern und deren Vorschau in einem Formular zu ermöglichen. Als Frontend-Framework stellt uns Vue.js eine Fülle an Tools und Methoden zur Verfügung, um diese Anforderung zu erfüllen. In diesem Artikel zeige ich Ihnen, wie Sie Bild-Upload- und Vorschaufunktionen in der Vue-Formularverarbeitung implementieren. Schritt 1: Vue-Komponenten definieren Zuerst müssen wir eine Vue-Gruppe definieren

Wie kann ich Bilder über Vue hochladen und in der Vorschau anzeigen? Wie kann ich Bilder über Vue hochladen und in der Vorschau anzeigen? Aug 19, 2023 pm 09:25 PM

Wie kann ich Bilder über Vue hochladen und in der Vorschau anzeigen? Überblick: In modernen Webanwendungen sind das Hochladen und Anzeigen von Bildern eine häufige Anforderung. Vue bietet als beliebtes JavaScript-Framework eine praktische Möglichkeit, diese Funktion zu erreichen. In diesem Artikel wird erläutert, wie Sie mit Vue Bilder hochladen und in der Vorschau anzeigen, einschließlich des Designs der Front-End-Schnittstelle und der Verarbeitung der Back-End-Schnittstelle. Design der Front-End-Schnittstelle: Zuerst müssen wir eine Front-End-Schnittstelle entwerfen, um Bilder auszuwählen und hochzuladen. In Vue können wir <i verwenden

So implementieren Sie das Hochladen und die Vorschau von Bildern in Uniapp So implementieren Sie das Hochladen und die Vorschau von Bildern in Uniapp Oct 21, 2023 am 11:48 AM

So implementieren Sie Bild-Upload und -Vorschau in uniapp In modernen sozialen Netzwerken und E-Commerce-Anwendungen sind Bild-Upload- und Vorschau-Funktionen sehr häufige Anforderungen. In diesem Artikel wird erläutert, wie die Bild-Upload- und Vorschaufunktionen in uniapp implementiert werden, und es werden spezifische Codebeispiele gegeben. 1. Implementierung der Bild-Upload-Funktion Im Uniapp-Projekt müssen Sie der Seite zunächst eine Bild-Upload-Komponente hinzufügen, wie unten gezeigt: <template><view><im

Was soll ich tun, wenn in der Vorschau und beim Drucken nicht alles angezeigt werden kann? Was soll ich tun, wenn in der Vorschau und beim Drucken nicht alles angezeigt werden kann? Mar 01, 2023 pm 02:45 PM

Lösung des Problems, dass bei der Vorschau und beim Drucken nicht alles angezeigt werden kann: 1. Öffnen Sie das WPS Office-Formular und klicken Sie auf „Druckvorschau“ in der oberen linken Ecke des Arbeitsbereichs. 2. Rufen Sie die Druckvorschauseite auf und klicken Sie auf „Skalierungsverhältnis“. 3. Wählen Sie in der angezeigten Dropdown-Liste das entsprechende Seitenverhältnis aus „Querformat“ oder „Hochformat“.

Lösen Sie das Fehlerberichtsproblem des Win11-Vorschauprogramms Lösen Sie das Fehlerberichtsproblem des Win11-Vorschauprogramms Jan 14, 2024 pm 05:33 PM

Wir können das Windows 11-System im Vorschauprogramm des Windows-Systems aktualisieren, aber viele Freunde sind beim Beitritt zum Vorschauprogramm auf den Fehlercode 0x0 gestoßen. Dies liegt daran, dass unserem System ein Teil der Registrierung fehlt Um es zu lösen, schauen wir es uns gemeinsam an. So gehen Sie mit Fehlern im Win11-Vorschauprogramm um. Methode 1: 1. Wenn unser System nicht die neueste Version des Systems ist, können wir versuchen, es im Systemupdate zu aktualisieren. Methode 2: 1. Der Fehler kann auch ein Problem mit der Registrierung sein. Wir können versuchen, ihn mit dem Registrierungsreparaturtool zu reparieren. Methode drei: 1. Laden Sie das Win11-System direkt von dieser Site herunter und installieren Sie es. 2. Nach dem Herunterladen installieren Sie es einfach gemäß der auf dieser Website bereitgestellten Anleitung.

See all articles