PHP结合HTML5使用FormData对象提交表单及上传图片-H5教程-PHP中文網

首頁

web前端

H5教程

PHP结合HTML5使用FormData对象提交表单及上传图片

PHP中文网

Mar 30, 2017 pm 04:59 PM

FormData 对象，可以把form中所有表单元素的name与value组成一个queryString，提交到后台。在使用Ajax提交时，使用FormData对象可以减少拼接queryString的工作量。
使用FormData对象
1.创建一个FormData空对象，然后使用append方法添加key/value

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

2.取得form对象，作为参数传入到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;%20+%20ret[&#39;photo&#39;]%20%20+%20&#39;" width="100">&#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>
    <p id="result"></p>
 </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中文网（www.php.cn）！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML中的H5標籤是什麼？May 09, 2025 am 12:11 AM

HTML中的H5標籤是第五級標題，用於標記較小的標題或子標題。 1)H5標籤幫助細化內容層次，提升可讀性和SEO。 2)結合CSS可定製樣式，增強視覺效果。 3)合理使用H5標籤，避免濫用，確保內容結構邏輯性。

H5代碼：Web結構的初學者指南May 08, 2025 am 12:15 AM

HTML5構建網站的方法包括：1.使用語義化標籤定義網頁結構，如、、等；2.嵌入多媒體內容，使用和標籤；3.應用表單驗證和本地存儲等高級功能。通過這些步驟，你可以創建一個結構清晰、功能豐富的現代網頁。

H5代碼結構：組織內容以實現可讀性May 07, 2025 am 12:06 AM

通過合理的H5代碼結構可以讓頁面在眾多內容中脫穎而出。 1)使用語義化標籤如、、等組織內容，使結構清晰。 2)通過CSS佈局如Flexbox或Grid控制頁面在不同設備上的呈現效果。 3)實現響應式設計，確保頁面在不同屏幕尺寸上自適應。

H5與較舊的HTML版本：比較May 06, 2025 am 12:09 AM

HTML5（H5）與舊版本HTML的主要區別包括：1）H5引入了語義化標籤，2）支持多媒體內容，3）提供離線存儲功能。 H5通過新標籤和API增強了網頁的功能和表現力，如和標籤，提高了用戶體驗和SEO效果，但需注意兼容性問題。

H5與HTML5：澄清術語和關係May 05, 2025 am 12:02 AM

H5和HTML5的區別在於：1）HTML5是網頁標準，定義結構和內容；2）H5是基於HTML5的移動網頁應用，適用於快速開發和營銷。

HTML5特徵：H5的核心May 04, 2025 am 12:05 AM

HTML5的核心特性包括語義化標籤、多媒體支持、表單增強和離線存儲與本地存儲。 1.語義化標籤如、等提高了代碼可讀性和SEO效果。 2.多媒體支持通過和標籤簡化了嵌入媒體內容的過程。 3.表單增強引入了新的輸入類型和驗證屬性，簡化了表單開發。 4.離線存儲和本地存儲通過ApplicationCache和localStorage等提高了網頁性能和用戶體驗。

H5：探索最新版本的HTMLMay 03, 2025 am 12:14 AM

html5isamajorrevisionofthehtmlStandardThatRevolutionsWebDevelopmentBybyIntroDucingNewSemanticeLementSemelementsandAndCapabilities.1）itenhancesCodereAdabilityAndSeowitability andSeowithelientsLike，and.2）