使用FormData提交表單及上傳圖片的方法-html教學-PHP中文網

首頁

web前端

html教學

使用FormData提交表單及上傳圖片的方法

一个新手

Sep 14, 2017 am 10:52 AM

formdata 提交表單

FormData 對象，可以把form中所有表單元素的name與value組成一個queryString，提交到後台。在使用Ajax提交時，使用FormData物件可以減少拼接queryString的工作量。

使用FormData物件

#1.建立一個FormData空對象，然後使用append方法新增key/value

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

#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; + ret[&#39;photo&#39;]  + &#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

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

登入後複製

######################

以上是使用FormData提交表單及上傳圖片的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

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

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

AI Hentai Generator

免費產生 AI 無盡。

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7543

CakePHP 教程

1381

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

如何實現PHP表單提交後的頁面跳轉 Aug 12, 2023 am 11:30 AM

如何實現PHP表單提交後的頁面跳轉【簡介】在Web開發中，表單的提交是一項常見的功能需求。當使用者填寫完表單並點擊提交按鈕後，通常需要將表單資料傳送至伺服器進行處理，並在處理完後將使用者重新導向至另一個頁面。本文將介紹如何使用PHP來實現表單提交後的頁面跳躍。【步驟一：HTML表單】首先，我們需要在HTML頁面中撰寫一個包含表單的頁面，以便使用者填寫需要提交的資料。

如何使用 JavaScript 實作表單的輸入框內容自動提示功能？ Oct 20, 2023 pm 04:01 PM

如何使用JavaScript實作表單的輸入框內容自動提示功能？簡介：表單的輸入框內容自動提示功能在網頁應用程式中非常常見，它可以幫助使用者快速輸入正確的內容。本文將介紹如何使用JavaScript實作此功能，並提供具體的程式碼範例。在建立HTML結構首先，我們需要建立一個包含輸入框和自動提示清單的HTML結構。可以使用以下程式碼：<!DOCTYP

如何處理PHP表單中的使用者權限管理 Aug 10, 2023 pm 01:06 PM

如何處理PHP表單中的使用者權限管理隨著Web應用程式的不斷發展，使用者權限管理是重要的功能之一。使用者權限管理可以控制使用者在應用程式中的操作權限，確保資料的安全性和合法性。在PHP表單中，使用者權限管理可以透過一些簡單的程式碼來實現。本文將介紹如何處理PHP表單中的使用者權限管理，並給予對應的程式碼範例。一、使用者角色的定義與管理首先，將使用者角色定義與管理是使用者權

如何使用 JavaScript 實作表單的輸入框內容即時校驗功能？ Oct 18, 2023 am 08:47 AM

如何使用JavaScript實作表單的輸入框內容即時校驗功能？在許多網頁應用程式中，表單是使用者與系統之間最常用的互動方式。然而，使用者輸入的內容往往需要進行有效性校驗，以確保資料的準確性和完整性。在這篇文章中，我們將學習如何使用JavaScript實作表單的輸入框內容即時校驗功能，並提供具體的程式碼範例。在建立表單首先，我們需要在HTML中建立一個簡單的表

MySQL事務處理：自動提交與手動提交的區別 Mar 16, 2024 am 11:33 AM

MySQL事務處理：自動提交與手動提交的差異在MySQL資料庫中，事務是一組SQL語句的集合，要麼全部執行成功，要麼全部執行失敗，保證了資料的一致性和完整性。在MySQL中，事務可以分為自動提交和手動提交，其區別在於事務提交的時機以及對事務的控制範圍。以下將詳細介紹自動提交和手動提交的區別，並給出具體的程式碼範例來說明。一、自動提交在MySQL中，如果沒有顯示

如何使用HTML、CSS和jQuery實現表單自動保存的進階功能 Oct 28, 2023 am 08:20 AM

如何使用HTML、CSS和jQuery實現表單自動保存的高級功能在現代網頁應用中，表單是非常常見的元素之一。當使用者在輸入表單資料時，如何能夠實現自動儲存的功能，不僅可以提高使用者的使用體驗，也能確保資料的安全性。本文將介紹如何使用HTML、CSS和jQuery來實作表單的自動儲存功能，並附上具體的程式碼範例。一、HTML表單的結構建構我們先來建立一個簡單的HT

PHP表單處理：表單資料查詢與篩選 Aug 07, 2023 pm 06:17 PM

PHP表單處理：表單資料查詢與篩選引言在網路開發中，表單是一種重要的互動方式，使用者可以透過表單向伺服器提交資料並進行進一步的處理。本文將介紹如何使用PHP處理表單資料的查詢與篩選功能。表單的設計與提交首先，我們需要設計一個包含查詢與篩選功能的表單。常見的表單元素包括輸入框、下拉清單、單選框、複選框等，根據具體需求進行設計。用戶在提交表單時，會將資料以POS

Laravel表單類別使用技巧：提高效率的方法 Mar 11, 2024 pm 12:51 PM

在編寫網站或應用程式時，表單是不可或缺的一部分。 Laravel作為一個流行的PHP框架，提供了豐富而強大的表單類，使得表單處理變得更加簡單和高效。本文將介紹一些Laravel表單類別的使用技巧，幫助你提升開發效率。下面透過具體的程式碼範例來詳細講解。建立表單要在Laravel中建立表單，首先需要在檢視中編寫對應的HTML表單。在處理表單時，可以使用Laravel

See all articles

使用FormData提交表單及上傳圖片的方法

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題