Heim > Artikel > Backend-Entwicklung > PHP kombiniert HTML5, um das FormData-Objekt zu verwenden und Bilder hochzuladen

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

伊谢尔伦Original: 2016-11-26 16:50:401538Durchsuche

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

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

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>

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispiele für vier grundlegende Sortieralgorithmen in PHPNächster Artikel：Beispiele für vier grundlegende Sortieralgorithmen in PHP

In Verbindung stehende Artikel

Mehr sehen