집 >웹 프론트엔드 >JS 튜토리얼 >H5 기능 FormData를 활용하여 새로 고침 없이 파일 업로드

H5 기능 FormData를 활용하여 새로 고침 없이 파일 업로드

亚连원래의: 2018-05-24 17:20:102129검색

친구가 예전에 업로드한 파일을 새로고침하면 안 된다고 하더군요. 가장 폭력적인 해결책은 인터넷에서 다중 이미지 업로드, 미리보기, 심지어 이미지 처리 및 기타 특수 효과까지 제공되는 다양한 JS 라이브러리를 검색하는 것입니다. 아래에서는 H5 기능인 FormData를 사용하여 새로 고침 없이 파일을 업로드하는 방법을 공유하겠습니다. 매우 실용적입니다.

전에 친구가 새로 고침 없이 파일을 업로드할 수 있다고 말했습니다. 가장 폭력적인 해결책은 인터넷에서 다중 이미지 업로드, 미리보기, 심지어 이미지 처리 및 기타 특수 효과까지 제공되는 다양한 JS 라이브러리를 검색하는 것입니다. 그렇다면 타사 라이브러리에 접속하지 않는 경우 Ajax를 사용하여 접속할 수 있습니까? 이 문제에 대해 누군가 제시한 해결책은 iframe을 사용하는 것인데 여기서는 자세히 설명하지 않겠습니다. 그러나 Html5는 FormData를 제공하므로 매개 변수와 파일 리소스를 함께 묶는 데 도움이 됩니다. 이런 식으로 $.ajax를 사용하여 새로 고치지 않고 쉽게 업로드할 수 있습니다. 물론 iframe도 필요하지 않습니다.

Code

다음은 프론트엔드 부분입니다.

<!DOCTYLE html>
<meta charset=utf->
<head>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/../jquery.min.js"></script>
</head>
<script type="text/javascript">
$(function(){
  $(&#39;#add&#39;).submit(function(){
    var data = new FormData($(&#39;#add&#39;)[]); 
    console.log(data);
    $.ajax({ 
      url: &#39;ajax.php&#39;, 
      type: &#39;POST&#39;, 
      data: data, 
      dataType: &#39;JSON&#39;, 
      cache: false, 
      processData: false, 
      contentType: false, 
      success:function(data){ 
        //alert(data);
        alert("UploadFile Success");
      }  
    }); 
    return false;  
  });
});
</script>
<form id=&#39;add&#39;>
<input type="text" name=&#39;book&#39;></input>
<input type="file" name=&#39;source&#39;></input>
<input type="submit">
</form>

내부 코드에 대해서는 자세히 설명하지 않고 코드 한 줄만 이야기하겠습니다.

var data = new FormData($(&#39;#add&#39;)[0]);

FormData는 양식 필드에 대한 키=>값을 구성할 수 있는 양식 개체입니다. 양식 개체의 그렇다면 추가 key=>value를 직접 연결해야 할까요? 자세한 내용은 Baidu FormData에서 확인할 수 있습니다.

그리고 왜 $('#add')[0]인가요?

js = jQuery[0];

PHP 부분

<?php 
  header(&#39;Content-Type:application/json; charset=utf-8&#39;);
  echo json_encode(array($_FILES,$_REQUEST));
?>

여기서 하세요. 테스트, $_FILES에 뭔가가 있다는 것을 알 수 있다면 업로드할 수 있다는 것을 증명합니다.

테스트 업로드

Ajax 요청이 ajax.php

에 있음을 알 수 있습니다.

미리보기를 보면 $_FILES 반환에 대한 관련 정보를 볼 수 있습니다.

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

H5 기능 FormData를 활용하여 새로 고침 없이 파일 업로드

관련 기사