PHP combined with html5 uses FormData object FormData object and uploads images-PHP Tutorial-php.cn

PHP combined with html5 uses FormData object FormData object and uploads images

伊谢尔伦

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

Original

1538 people have browsed it

FormData object can combine the name and value of all form elements in the form into a queryString and submit it to the background. When submitting using Ajax, using the FormData object can reduce the workload of splicing queryString.

Use FormData object

1. Create an empty FormData object, and then use the append method to add key/value

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

Copy after login

2. Get the form object and pass it into the FormData object as a parameter

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

Copy after login

Use FormData to submit the form and upload files:

<!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 combined with html5 uses FormData object FormData object and uploads images" >&#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>

Copy after login

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

Copy after login

PHP combined with html5 uses FormData object FormData object and uploads images