HTML5 이미지 미리보기 예 Sharing_html5 튜토리얼 기술

HTML5 이미지 미리보기에는 두 가지 방법이 필요합니다

1.URL
2.FileReader
코드 직접 업로드

코드 복사

코드는 다음과 같습니다.

#preview {
너비: 300px;
높이: 300px;
오버플로: 숨김;
}
#preview img {
너비: 100%;
높이: 100%;
}


< ;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 = $(''). 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 (파일 )
})
})

URL.revokeObjectURL 메소드 Opera는 IE9 이하를 제외하고 FileReader에서는 지원하지 않지만 다른 브라우저에서는 지원합니다.