PHP は html5 を組み合わせて FormData オブジェクトを使用し、画像をアップロードします-PHPチュートリアル-php.cn

PHP は html5 を組み合わせて FormData オブジェクトを使用し、画像をアップロードします

伊谢尔伦

リリース： 2016-11-26 16:50:40

オリジナル

1501 人が閲覧しました

FormData オブジェクトは、フォーム内のすべてのフォーム要素の名前と値をクエリ文字列に結合し、バックグラウンドに送信できます。 Ajax を使用して送信する場合、FormData オブジェクトを使用すると、queryString を結合する作業負荷を軽減できます。

FormData オブジェクトを使用します

1. 空の FormData オブジェクトを作成し、append メソッドを使用してキー/値を追加します

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 オブジェクトを使用し、画像をアップロードします