웹 프론트엔드 JS 튜토리얼 업로드된 이미지, 이미지 크기 확인, 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('< ;img src="http://images.anjiwu.com/images/loading.gif"/>')
$('display_div').setstyle('display', 'block'); >$ ('upload_div').setstyle('display', 'none');
}
}


이미지 유형 및 크기 확인

//예제 2
function verify_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 filesize = image.filesize; 🎜>$( 'beforeend').src=file;
$('div_regi_right').setstyle('display', 'block')
if(width>80 && height>80 && filesize>102400 ){
alert('80*80픽셀 이하의 이미지를 업로드하세요.')
if(a==1){
return false; 🎜>if(a ==1){
return true;
}
}
}



사진 미리보기




코드 복사
코드는 다음과 같습니다.
//예제 3function viewimg(index) { var name = 'uploadimg' index; var imgup = $(name); var imgpath = getpath(imgup);
var local = imgup.value; lastindexof(".");//업로드된 파일의 크기 결정
var img = document.createelement("img")
img.src =
var filesize; .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()
//값 지우기 파일 www.3ppt.com
imgup.select();
document.selection.clear();
} else {
//이미지 표시
document.getelementbyid("sig_preview" 색인) .innerhtml = "";
}
if (index >=3){
var cnt = index 1;
$("img" cnt). style.display = "";
}
}

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Vue에서 이미지 스크롤 및 썸네일 미리보기를 구현하는 방법은 무엇입니까? Vue에서 이미지 스크롤 및 썸네일 미리보기를 구현하는 방법은 무엇입니까? Aug 18, 2023 pm 01:51 PM

Vue에서 이미지 스크롤 및 썸네일 미리보기를 구현하는 방법은 무엇입니까? Vue 프로젝트에서는 많은 수의 사진을 표시해야 하는 경우가 많으며 사용자가 이러한 사진을 쉽게 탐색하고 미리 볼 수 있기를 바랍니다. 이 글에서는 Vue 컴포넌트를 사용하여 이미지 스크롤 및 썸네일 미리보기 기능을 구현하는 방법을 소개합니다. 먼저, 이미지 스크롤과 썸네일 미리보기를 용이하게 하기 위해 적절한 Vue 라이브러리를 설치하고 도입해야 합니다. 이 예에서는 vue-awesome-swiper 및 vue-image-preview 두 라이브러리를 사용하여 구현합니다.

Douyin 댓글에 사진을 게시하는 방법 Douyin 댓글에 사진을 게시하는 방법 Feb 19, 2024 pm 01:10 PM

Douyin은 세계에서 가장 인기 있는 짧은 동영상 공유 플랫폼 중 하나로서 수억 명의 사용자를 끌어 모았습니다. 다른 사람의 멋진 작품을 볼 때 우리는 그 속에서 역동적이고 흥미롭고 의미 있는 순간에 감동을 받는 경우가 많습니다. 이때 우리는 텍스트 댓글을 통해 우리의 의견과 생각을 표현할 수 있을 뿐만 아니라, 그림 댓글을 통해 우리의 감정을 더욱 생생하게 표현할 수 있습니다. 그렇다면 TikTok에 사진 댓글을 게시하는 방법은 무엇입니까? 먼저 Douyin 앱을 열고 관심 있는 영상을 입력하세요. 다음으로, 우리는 휴대폰의 다양한 운영 체제에 의존해야 합니다.

향후 기능에 대한 조기 액세스 Safari 기술 미리보기 173 출시 향후 기능에 대한 조기 액세스 Safari 기술 미리보기 173 출시 Jul 02, 2023 pm 01:37 PM

Apple은 오늘 Safari 17에서 출시될 수 있는 일부 기능을 포함하는 Safari Technology Preview 버전 173을 출시했습니다. 이 버전은 macOS Sonoma 베타 버전과 macOS Ventura 시스템에 적합합니다. 관심 있는 사용자는 공식 웹사이트에서 다운로드할 수 있습니다. Safari Technology Preview 버전 173은 설정에 기능 플래그 블록을 추가하여 원래 개발 메뉴의 실험적 기능을 대체합니다. 이 섹션에서는 개발자가 특정 기능을 빠르게 검색하고 다양한 방식으로 상태를 "안정적", "테스트 가능", "미리 보기" 또는 "개발자"로 표시할 수 있습니다. 새롭게 디자인된 개발 메뉴를 통해 제작자는 웹 페이지, 웹 앱, 다른 앱의 웹 콘텐츠를 구축하기 위한 주요 도구를 더 쉽게 찾을 수 있습니다.

Vue 양식 처리에서 양식 이미지 업로드 및 미리보기를 구현하는 방법 Vue 양식 처리에서 양식 이미지 업로드 및 미리보기를 구현하는 방법 Aug 10, 2023 am 11:57 AM

Vue 양식 처리에서 양식 이미지 업로드 및 미리보기를 구현하는 방법 소개: 최신 웹 애플리케이션에서 양식 처리는 매우 일반적인 요구 사항입니다. 일반적인 요구 사항 중 하나는 사용자가 이미지를 업로드하고 양식에서 미리 볼 수 있도록 허용하는 것입니다. 프런트엔드 프레임워크인 Vue.js는 이러한 요구 사항을 충족하기 위한 풍부한 도구와 방법을 제공합니다. 이 기사에서는 Vue 양식 처리에서 이미지 업로드 및 미리보기 기능을 구현하는 방법을 보여 드리겠습니다. 1단계: Vue 구성 요소 정의 먼저 Vue 그룹을 정의해야 합니다.

uniapp에서 이미지 업로드 및 미리보기를 구현하는 방법 uniapp에서 이미지 업로드 및 미리보기를 구현하는 방법 Oct 21, 2023 am 11:48 AM

uniapp에서 이미지 업로드 및 미리보기를 구현하는 방법 현대 소셜 네트워크 및 전자상거래 애플리케이션에서 이미지 업로드 및 미리보기 기능은 매우 일반적인 요구 사항입니다. 이 기사에서는 uniapp에서 이미지 업로드 및 미리보기 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. 이미지 업로드 기능 구현 uniapp 프로젝트에서는 먼저 아래와 같이 페이지에 이미지 업로드 구성 요소를 추가해야 합니다. &lt;template&gt;&lt;view&gt;&lt;im

Vue를 통해 이미지를 업로드하고 미리 보는 방법은 무엇입니까? Vue를 통해 이미지를 업로드하고 미리 보는 방법은 무엇입니까? Aug 19, 2023 pm 09:25 PM

Vue를 통해 이미지를 업로드하고 미리 보는 방법은 무엇입니까? 개요: 최신 웹 애플리케이션에서는 이미지 업로드 및 미리보기가 일반적인 요구 사항입니다. 널리 사용되는 JavaScript 프레임워크인 Vue는 이 기능을 구현하는 편리한 방법을 제공합니다. 이 기사에서는 Vue를 사용하여 프런트 엔드 인터페이스 디자인 및 백엔드 인터페이스 처리를 포함하여 이미지를 업로드하고 미리 보는 방법을 소개합니다. 프런트엔드 인터페이스 디자인: 먼저 이미지를 선택하고 업로드할 프런트엔드 인터페이스를 디자인해야 합니다. Vue에서는 &lt;i를 사용할 수 있습니다.

미리보기 및 인쇄 시 모든 내용이 표시되지 않으면 어떻게 해야 합니까? 미리보기 및 인쇄 시 모든 내용이 표시되지 않으면 어떻게 해야 합니까? Mar 01, 2023 pm 02:45 PM

미리보기 및 인쇄 시 모든 항목이 표시되지 않는 문제에 대한 해결 방법: 1. WPS Office 양식을 열고 작업 표시줄 영역의 왼쪽 상단에 있는 "인쇄 미리보기"를 클릭합니다. 2. 인쇄 미리보기 페이지에 들어가서 "배율 비율"을 클릭합니다. 3. 나타나는 드롭다운 목록에서 "가로" 또는 "세로" 중에서 해당 비율을 선택합니다.

win11 미리보기 프로그램의 오류 보고 문제 해결 win11 미리보기 프로그램의 오류 보고 문제 해결 Jan 14, 2024 pm 05:33 PM

Windows 시스템의 미리 보기 프로그램에서 Windows 11 시스템을 업데이트하고 업그레이드할 수 있지만 미리 보기 프로그램에 참여할 때 많은 친구들이 오류 코드 0x0을 경험했습니다. 이는 우리 시스템에 레지스트리 일부가 누락되었기 때문입니다. 이를 해결하기 위해 함께 살펴보겠습니다. win11 미리보기 프로그램의 오류를 처리하는 방법 방법 1: 1. 우리 시스템이 최신 버전이 아닌 경우 시스템 업데이트에서 업데이트를 시도해 볼 수 있습니다. 방법 2: 1. 오류는 레지스트리 문제일 수도 있습니다. 레지스트리 복구 도구를 사용하여 복구해 볼 수도 있습니다. 방법 3: 1. 이 사이트에서 win11 시스템을 직접 다운로드하여 설치합니다. 2. 다운로드 후, 이 사이트에서 제공하는 튜토리얼에 따라 설치하세요.

See all articles