본 글에서는 jQuery로 구현한 업로드 이미지의 로컬 미리보기 효과를 주로 소개하고, jQuery 업로드 이미지의 로컬 미리보기와 관련된 관련 페이지 요소 속성의 동적 연산 구현 기법을 예시 형태로 분석해 도움이 필요한 친구들이 참고할 수 있습니다.
이 문서에서는 jQuery로 구현된 업로드된 이미지의 로컬 미리보기 효과 예를 설명합니다. 참고용으로 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>www.jb51.net jquery上传图片本地预览效果</title>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<input id="upload" type="file">
<img id="preview" src="">
<script type="text/javascript">
$('#upload').change(function(){
// 获取FileList的第一个元素
alert(document.getElementById('upload').files[0]);
var f = document.getElementById('upload').files[0];
src = window.URL.createObjectURL(f);
document.getElementById('preview').src = src
})
</script>
</body>
</html>작동 효과:
위는 제가 모든 사람을 위해 편집한 내용입니다. 이 내용이 모든 사람에게 도움이 되기를 바랍니다. 미래.
관련글 :
vue-cli가 webpack 템플릿을 초기화할 수 없는 문제를 빠르게 해결
vue-cli + webpack 새 프로젝트 오류 문제 해결
webpack 기반 매개 변수에 대한 자세한 설명 .config.js
위 내용은 jQuery로 구현된 업로드된 이미지의 로컬 미리보기 효과에 대한 간단한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
