집 > 기사 > 웹 프론트엔드 > PHP 및 HTML5 FormData를 사용하여 새로 고침 없이 파일 업로드

PHP 및 HTML5 FormData를 사용하여 새로 고침 없이 파일 업로드

不言원래의: 2018-06-28 15:15:151297검색

이 글은 주로 PHP와 HTML5 FormData를 사용하여 새로 고침 없는 파일 업로드를 구현하는 방법을 소개합니다. 이 글은 먼저 프로그램 작성 단계를 분석하고 마지막으로 도움이 필요한 친구가 참조할 수 있는 전체 예제를 제공합니다. -새로 고침 파일 업로드가 일반적입니다. 이 다소 복잡한 문제에 대한 일반적인 해결책은 iframe을 구성하는 것입니다.

HTML5에서는 FormData 객체 API가 제공되어 FormData를 통해 XMLHttpRequest를 통해 쉽게 양식 요청을 구성하고 보낼 수 있습니다. FormData 개체를 통해 파일을 보내는 것도 가능하므로 새로 고침 없이 업로드하는 것이 매우 간단해집니다.

FormData를 사용하는 방법은 무엇입니까? 이에 대해 스크립트하우스에서는 아래에서 간략하게 소개하겠습니다.

1. FormData 개체 구성

FormData 개체를 가져오는 방법은 매우 간단합니다.

var fd = new FormData();

FormData 개체는 양식 요청을 추가하는 데 사용되는 하나의 메서드만 제공합니다. 객체에 대한 매개변수입니다.

현재 주류 브라우저에서는 다음 두 가지 방법으로 FormData를 얻거나 수정할 수 있습니다.

방법 1: 빈 FormData 개체를 만든 다음 추가 메서드를 사용하여 키-값 쌍을 하나씩 추가합니다. 예:

var fd = new FormData();
fd.append("name", "脚本之家");
fd.append("blog", "http://jb51.net");
fd.append("file", document.getElementById("file"));

이 방법에는 HTML 양식 개체가 필요하지 않습니다.

방법 2: 양식 요소 개체를 가져와 FormData 개체에 매개변수로 전달합니다. 예:

var formobj = document.getElementById("form");
var fd = new FormData(formobj);

물론 추가 메서드를 사용하여 fd에 다른 매개변수를 계속 추가할 수도 있습니다.

2. FormData가 요청을 보냅니다

이제 FormData 개체가 있으므로 요청을 어떻게 보내나요? FormData 개체는 향상된 XMLHttpRequest 개체의 전송 메서드에 주로 사용됩니다. 다음 예를 참조하세요.

var xhr = new XMLHttpRequest();    
xhr.open("POST" ,"http://jb51.net" , true);
xhr.send(fd);
xhr.onload = function(e) {
  if (this.status == 200) {
    alert(this.responseText);
  }
};

3. jquery에서 FormData 사용

jQuery의 ajax 메서드에서는 새로 고침 없는 업로드를 위해 FormData 메서드를 사용할 수도 있습니다. 하지만 매개변수 설정에 주의하세요. 다음을 참조하세요.

$.ajax({
  url: "http://jb51.net",
  type: &#39;POST&#39;,
  data: fd,
  /**
   *必须false才会自动加上正确的Content-Type
   */
  contentType:false,
  /**
   * 必须false才会避开jQuery对 formdata 的默认处理
   * XMLHttpRequest会对 formdata 进行正确的处理
   */
  processData:false
}).done(function(result){
  console.log(result);
}).fail(function(err){
  console.log(err);
});

4. 전체 예제(PHP 처리 예제 포함):

<?php
//php 接收表单提交信息并打印
if( isset( $_REQUEST[&#39;do&#39;]) ){
  var_dump($_REQUEST);
  var_dump($_FILES);
  die();
}

?>
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>FormData Test - jb51.net</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  </head>
  <body>
    <form id="form">
      <input type="file" name="file" id="file" />
      <input type="text" name="name" id="" value="脚本之家" />
      <input type="text" name="blog" id="" value="http://jb51.net" />
      <input type="submit" name="do" id="do" value="submit" />
    </form>
    <script>
    $("form").submit(function(e){
      e.preventDefault();
      
      //空对象然后添加
      var fd = new FormData();
      fd.append("name", "脚本之家");
      fd.append("blog", "http://jb51.net");
      fd.append("file", document.getElementById("file"));
      //fd.append("file", $(":file")[0].files[0]); //jQuery 方式
      fd.append("do", "submit");
      
      //通过表单对象创建 FormData
      var fd = new FormData(document.getElementById("form"));
      //var fd = new FormData($("form:eq(0)")[0]); //jquery 方式
      
      //XMLHttpRequest 原生方式发送请求
      var xhr = new XMLHttpRequest();    
      xhr.open("POST" ,"" , true);
      xhr.send(fd);
      xhr.onload = function(e) {
        if (this.status == 200) {
          alert(this.responseText);
        };
      };
      return;
      //jQuery 方式发送请求
      $.ajax({
        type:"post",
        //url:"",
        data: fd,
        processData: false,
        contentType: false
      }).done(function(res){
        console.log(res);
      });
      
      return false;
    });
    </script>
  </body>
</html>

위 내용은 전체입니다. 이 글의 내용이 모든 분들의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용을 보시려면 PHP 중국어 홈페이지를 주목해주세요!

PHP 및 HTML5 FormData를 사용하여 새로 고침 없이 파일 업로드

관련 기사