업로드할 파일을 직렬화하는 Ajax serialize() 형식

이 글에서는 Ajax serialize() 폼 직렬화를 통한 파일 업로드에 대한 ajax 정보를 주로 소개합니다. ajax에 관심 있는 친구들은 참고하시면 됩니다.

전통적인 폼 폼 제출을 통한 파일 업로드

<form id="uploadForm" action="" method="post" enctype="multipart/form-data"> 
   <p>上传文件：<input type ="file" name="file"/></p> 
   <input type="submit" value="上传"/> 
</form>

단 , 전통적인 양식 제출로 인해 페이지가 새로 고쳐지지만 어떤 경우에는 페이지가 새로 고쳐지는 것을 원하지 않습니다. 이 경우 우리는 모두 Ajax를 사용하여 요청합니다.

serialize()를 사용하여 양식을 직렬화하고 제출합니다

$.ajax({ 
   url: "", 
   type: "POST", 
   data: $('#uploadForm').serialize(), 
   success: function(data) {   
   }, 
   error: function(data) {
   } 
});

위와 같이 $('#uploadForm').serialize()를 통해 양식을 직렬화하여 All로 변환할 수 있습니다. 매개변수가 서버에 전달됩니다.

단, 위 방법은 일반 매개변수만 전달할 수 있으며, 업로드된 파일의 파일 스트림을 직렬화하여 전달할 수 없습니다. 그러나 이제 주류 브라우저에서는 FormData라는 개체를 지원하기 시작했습니다. 이 개체를 사용하면 Ajax를 사용하여 쉽게 파일을 업로드할 수 있습니다.

FormData를 사용하여 Ajax 요청 및 파일 업로드

<form id="uploadForm"> 
   <p>上传文件：<input type="file" name="file" /></p> 
   <input type="button" value="上传" onclick="upload()" /> 
</form>
function upload() { 
   var formData = new FormData($("#uploadForm")[0]); 
   $.ajax({ 
     url: &#39;&#39;, 
     type: &#39;POST&#39;, 
     data: formData, 
     async: false, 
     cache: false, 
     contentType: false, 
     processData: false, 
     success: function(data) {
     }, 
     error: function(data) {   
     } 
   }); 
}

위는 편집자가 파일을 직렬화하고 업로드하기 위해 소개한 Ajax serialize() 양식입니다. 모든 사람! !

관련 권장 사항:

비동기 새로 고침을 달성하기 위한 손으로 쓴 Ajax 방법의 예

HTTP 메시지 및 Ajax의 기본 지식을 설명하는 예

Ajax 비동기 요청 기술 분석 예

위 내용은 업로드할 파일을 직렬화하는 Ajax serialize() 형식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!