jQuery로 구현된 업로드된 이미지의 로컬 미리보기 효과에 대한 간단한 예-JS 튜토리얼-php.cn

jQuery로 구현된 업로드된 이미지의 로컬 미리보기 효과에 대한 간단한 예

亚连

풀어 주다： 2018-05-28 14:23:50

원래의

1170명이 탐색했습니다.

본 글에서는 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">
$(&#39;#upload&#39;).change(function(){
  // 获取FileList的第一个元素
  alert(document.getElementById(&#39;upload&#39;).files[0]);
  var f = document.getElementById(&#39;upload&#39;).files[0];
  src = window.URL.createObjectURL(f);
  document.getElementById(&#39;preview&#39;).src = src
})
</script>
</body>
</html>

로그인 후 복사

작동 효과: