집 >백엔드 개발 >PHP 튜토리얼 >PHP는 html5를 결합하여 FormData 객체를 사용하고 이미지를 업로드합니다.

PHP는 html5를 결합하여 FormData 객체를 사용하고 이미지를 업로드합니다.

伊谢尔伦원래의: 2016-11-26 16:50:401567검색

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

FormData 개체 사용

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

var formdata = new FormData();
formdata.append(&#39;name&#39;,&#39;fdipzone&#39;);
formdata.append(&#39;gender&#39;,&#39;male&#39;);

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;"    style="max-width:90%" alt="PHP는 html5를 결합하여 FormData 객체를 사용하고 이미지를 업로드합니다." >&#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>
    <div id="result"></div>
 </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);
?>

PHP는 html5를 결합하여 FormData 객체를 사용하고 이미지를 업로드합니다.

성명：

이전 기사：PHP의 네 가지 기본 정렬 알고리즘 예다음 기사：PHP의 네 가지 기본 정렬 알고리즘 예

PHP는 html5를 결합하여 FormData 객체를 사용하고 이미지를 업로드합니다.

관련 기사