PHP kombiniert HTML5, um das FormData-Objekt zu verwenden und Bilder hochzuladen-PHP-Tutorial-php.cn

PHP kombiniert HTML5, um das FormData-Objekt zu verwenden und Bilder hochzuladen

伊谢尔伦

Freigeben： 2016-11-26 16:50:40

Original

1538 Leute haben es durchsucht

Das FormData-Objekt kann den Namen und den Wert aller Formularelemente im Formular in einem queryString kombinieren und an den Hintergrund senden. Bei der Übermittlung mit Ajax kann die Verwendung des FormData-Objekts den Arbeitsaufwand für das Zusammenfügen von queryString reduzieren.

FormData-Objekt verwenden

1. Erstellen Sie ein leeres FormData-Objekt und verwenden Sie dann die Append-Methode, um Schlüssel/Wert hinzuzufügen

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

Nach dem Login kopieren

2 Übergeben Sie es als Parameter. Gehen Sie zum FormData-Objekt

<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);

Nach dem Login kopieren

und verwenden Sie FormData, um das Formular zu senden und Dateien hochzuladen:

<!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 kombiniert HTML5, um das FormData-Objekt zu verwenden und Bilder hochzuladen" >&#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>

Nach dem Login kopieren

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);
?>

Nach dem Login kopieren

PHP kombiniert HTML5, um das FormData-Objekt zu verwenden und Bilder hochzuladen