JS 이미지 미리보기 구현 소개 요약

이 글에서는 JS에서 사진미리보기를 구현하는 두 가지 방법을 주로 소개합니다. 매우 훌륭하고 참고할만한 가치가 있습니다. 도움이 필요한 친구가 참고할 수 있습니다.

사용자 경험을 고려하여 웹페이지에 있는 사진을 업로드하기 전에 미리보기를 해야 합니다 이는 매우 필요한 단계입니다. 첫째, 사용자에게 보안감을 줄 수 있습니다. 둘째, 문제로 인해 이미지 파일이 데이터베이스에 제출되지 않고 저장 리소스를 점유하는 것을 방지할 수 있습니다.

미리보기를 구현하는 방법은 두 가지가 있습니다. 하나는 window.URL.createObjectURl 메소드를 사용하여 선택한 이미지 데이터(입력 값으로 거의 이해되지 않음)에 대한 blob 객체 경로를 생성하는 것이고, 두 번째는 FileReader를 사용하여 추출기를 읽는 것입니다.

그러므로 어떤 방법을 사용하든 먼저 파일 데이터를 가져와야 합니다. 파일 데이터를 가져오는 것은 파일 컬렉션에서 가져오는 것입니다.

방법 1:

코드는 다음과 같습니다.

<input type=file id="inp">
<script>
 inp.onchange=function(){
 var file=this.files[0] // 获取input上传的图片数据;
 var img=new Image() ;
 url=window.URL.createObjectURL(file) // 得到bolb对象路径，可当成普通的文件路径一样使用，赋值给src;
 img.src=url;
 //其实也可一句代码搞定，不需要声明那么多变量；img.scr=window.URL.cteateObejectURL(this.files[0]) ;
 然后把img添加到页面就实现预览了
 }
<script>

방법 2:

파일을 읽으려면 FileRader 개체

를 사용하세요. 4단계로 나누어진다; 1. FileReader 쌍을 만듭니다. 2. readAsDataURL 메서드를 호출하여 파일을 읽습니다. 3. onload 이벤트를 호출하여 전체 데이터를 가져와야 하지만 파일을 언제 읽었는지 알 수 없습니다. ? 이므로 세 번째 모니터링 단계가 필요합니다. 4. FileRader 객체 r의 result 속성을 통해 판독 결과를 가져옵니다.

코드는 다음과 같습니다:

<input type=file id="inp">
<input type=file id="inp">
<script>
inp.onchange=function(){
 var read=new FileReader() // 创建FileReader对像;
 read.readAsDataURL(this.files[0]) // 调用readAsDataURL方法读取文件;
  read.onload=function(){
   url=read.result // 拿到读取结果;
   var img=new Image();
   img.src=url;
   p.appendChild(img);
 }
 }

위 내용은 JS 이미지 미리보기 구현 소개 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!