새로 고침 없이 업로드할 수 있는 JavaScript 미리보기 이미지 기능

이 글에서는 JavaScript를 사용하여 새로 고침 없이 미리보기 이미지를 업로드하는 간단한 기능을 구현하는 방법을 소개합니다.

이 글에서는 FormData와 FileReader 두 가지를 사용합니다.

FileReader는 이미지 탐색에 사용됩니다.

FormData는 Ajax 요청에 사용됩니다.

html code

먼저 양식과 이미지용 컨테이너를 만들어야 합니다.

  <form enctype="multipart/form-data" id="oForm">
    <input type="file" name="file" id="file" onchange="readAsDataURL()" />
    <input type="button" value="提交" onclick="doUpload()" />
  </form>
  <p>
    <img alt="" id="img"/>
  </p>

javascript code

FormData:

FormData 객체는 XMLHttpRequest를 사용하여 요청을 보내기 위한 키/값 쌍 세트를 조립하는 데 사용할 수 있습니다. 폼의 인코딩 타입이 multipart/form-data로 설정된 경우, FormData를 통해 전송되는 데이터 형식은 submit() 메서드를 통해 폼이 전송하는 데이터 형식과 동일하다.

여기서 FormData 개체는 양식의 모든 입력 데이터를 얻은 다음 Ajax 요청을 사용하여 지정된 URL로 데이터를 보내므로 양식이 제출될 때 점프가 발생하지 않습니다.

  function doUpload() { 
     var formData = new FormData($( "#oForm" )[0]); 
     console.log(formData); 
     $.ajax({ 
       url: 'pp', 
       type: 'POST', 
       data: formData, 
       async: false, 
       cache: false, 
       contentType: false, 
       processData: false, 
       success: function (returndata) { 
         console.log(returndata); 
       }, 
       error: function (returndata) { 
         console.log(returndata); 
       } 
     }); 
  }

FileReader:

FileReader 개체를 사용하면 웹 애플리케이션이 File 또는 Blob 개체를 사용하여 사용자 컴퓨터에 저장된 파일(또는 원시 데이터 버퍼)의 내용을 비동기적으로 읽을 수 있습니다. 무엇을 읽을지.

여기서 FileReader 개체는 파일에서 이미지를 가져오고 이미지를 데이터 URL 형식으로 변환하여 미리 생성된 컨테이너에 표시하는 데 사용됩니다.

rreee

위 내용은 새로 고침 없이 업로드할 수 있는 JavaScript 미리보기 이미지 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!