자바스크립트에서 이미지 미리보기를 구현하는 두 가지 방법

이 글에서는 주로 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단계. 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에서 이미지 미리보기를 구현하는 방법을 에디터가 소개하는 여러 가지 방법입니다. 궁금하신 점이 있으시면 도움이 되셨으면 좋겠습니다. , 메시지를 남겨주시면 편집자가 제때에 모든 사람에게 답변해 드리겠습니다. 또한 Script House 웹사이트를 지원해 주시는 모든 분들께 감사의 말씀을 전하고 싶습니다!

위 내용은 자바스크립트에서 이미지 미리보기를 구현하는 두 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!