JS+HTML 5 이미지 업로드 미리보기 효과 구현 전체 인 스 턴 스【테스트 사용 가능】
프로젝트 에서 input 태그 file 형식의 파일 로 업로드 되 는 것 을 만 났 습 니 다.업로드 하기 전에 그림 미리 보기 기능 을 하려 고 합 니 다.이전 솔 루 션 은 파일 을 먼저 올 리 고 주 소 를 되 돌려 페이지 에 표시 하 는 것 이 좋 지 않 았 습 니 다.사용자 의 기본 정보 가 저장 되 지 않 았 을 수도 있 지만 이미지 가 바 뀌 었 기 때문에 변경 이 필요 하 다 면 불필요 한 그림 을 저장 하 는 서버 가 생 겼 습 니 다.
인터넷 에서 해결 방안 을 찾 았 는데 다음 과 같다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>html5 </title>
<style>
#preview {
width: 300px;
height: 300px;
overflow: hidden;
}
#preview img {
width: 100%;
height: 100%;
}
</style>
<script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function preview1(file) {
var img = new Image(), url = img.src = URL.createObjectURL(file)
var $img = $(img)
img.onload = function() {
URL.revokeObjectURL(url)
$('#preview').empty().append($img)
}
}
function preview2(file) {
var reader = new FileReader()
reader.onload = function(e) {
var $img = $('<img>').attr("src", e.target.result)
$('#preview').empty().append($img)
}
reader.readAsDataURL(file)
}
$(function() {
$('[type=file]').change(function(e) {
var file = e.target.files[0]
preview1(file)
})
})
</script>
</head>
<body>
<form enctype="multipart/form-data" action="" method="post">
<input type="file" name="imageUpload"/>
<div id="preview" style="width: 300px;height:300px;border:1px solid gray;"></div>
</form>
</body>
</html>본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JS 판단 수조 네 가지 실현 방법 상세그러면 본고는 주로 몇 가지 판단 방식과 방식 판단의 원리를 바탕으로 문제가 있는지 토론하고자 한다. 예를 들어 html에 여러 개의 iframe 대상이 있으면 instanceof의 검증 결과가 기대에 부합되지 않을...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
