집 > 기사 > 웹 프론트엔드 > FormData를 사용하여 양식을 제출하고 이미지를 업로드하는 방법

FormData를 사용하여 양식을 제출하고 이미지를 업로드하는 방법

一个新手원래의: 2017-09-14 10:52:142361검색

FormData 개체는 양식에 있는 모든 양식 요소의 이름과 값을 queryString으로 결합하여 백그라운드에 제출할 수 있습니다. Ajax를 사용하여 제출할 때 FormData 개체를 사용하면 queryString을 연결하는 작업 부하를 줄일 수 있습니다.

FormData 개체 사용

1. 빈 FormData 개체를 만든 다음 추가 메서드를 사용하여 키/값을 추가합니다.

var formdata = 새로운 FormData();
formdata.append('name','fdipzone');

2. 양식 개체를 가져와서 FormData 개체에 매개변수로 전달합니다.

    <form name="form1" id="form1">  
    <input type="text" name="name" value="fdipzone">  
    <input type="text" name="gender" value="male">  
    </form>

var form = document.getElementById(&#39;form1&#39;);  
var formdata = new FormData(form);

FormData 양식을 사용하여 제출하고 파일 업로드:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<html>  
 <head>  
  <meta http-equiv="content-type" content="text/html; charset=utf-8">  
  <title> FormData Demo </title>  
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>  
  
  <script type="text/javascript">  
  <!--  
    function fsubmit(){  
        var data = new FormData($(&#39;#form1&#39;)[0]);  
        $.ajax({  
            url: &#39;server.php&#39;,  
            type: &#39;POST&#39;,  
            data: data,  
            dataType: &#39;JSON&#39;,  
            cache: false,  
            processData: false,  
            contentType: false  
        }).done(function(ret){  
            if(ret[&#39;isSuccess&#39;]){  
                var result = &#39;&#39;;  
                result += &#39;name=&#39; + ret[&#39;name&#39;] + &#39;<br>&#39;;  
                result += &#39;gender=&#39; + ret[&#39;gender&#39;] + &#39;<br>&#39;;  
                result += &#39;<img src="&#39; + ret[&#39;photo&#39;]  + &#39;" width="100">&#39;;  
                $(&#39;#result&#39;).html(result);  
            }else{  
                alert(&#39;提交失敗&#39;);  
            }  
        });  
        return false;  
    }  
  -->  
  </script>  
  
 </head>  
  
 <body>  
    <form name="form1" id="form1">  
        <p>name:<input type="text" name="name" ></p>  
        <p>gender:<input type="radio" name="gender" value="1">male <input type="radio" name="gender" value="2">female</p>  
        <p>photo:<input type="file" name="photo" id="photo"></p>  
        <p><input type="button" name="b1" value="submit" onclick="fsubmit()"></p>  
    </form>  
    <p id="result"></p>  
 </body>  
</html>

server.php

<?php  
$name = isset($_POST[&#39;name&#39;])? $_POST[&#39;name&#39;] : &#39;&#39;;  
$gender = isset($_POST[&#39;gender&#39;])? $_POST[&#39;gender&#39;] : &#39;&#39;;  
  
$filename = time().substr($_FILES[&#39;photo&#39;][&#39;name&#39;], strrpos($_FILES[&#39;photo&#39;][&#39;name&#39;],&#39;.&#39;));  
  
$response = array();  
  
if(move_uploaded_file($_FILES[&#39;photo&#39;][&#39;tmp_name&#39;], $filename)){  
    $response[&#39;isSuccess&#39;] = true;  
    $response[&#39;name&#39;] = $name;  
    $response[&#39;gender&#39;] = $gender;  
    $response[&#39;photo&#39;] = $filename;  
}else{  
    $response[&#39;isSuccess&#39;] = false;  
}  
  
echo json_encode($response);  
?>

위 내용은 FormData를 사용하여 양식을 제출하고 이미지를 업로드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：메타 및 링크 태그의 일반적인 사용법다음 기사：메타 및 링크 태그의 일반적인 사용법