페이지를 새로 고치지 않고 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를 통해 XMLHt 집합을 조립할 수 있습니다. 객체 tpRequest 전송 요청된 키/값 쌍. 양식과 독립적으로 사용할 수 있으므로 양식 데이터를 보다 유연하고 편리하게 보낼 수 있습니다. 양식의 인코딩 유형을 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!