PHP結合HTML5使用FormData物件提交表單及上傳圖片

阿新 • • 發佈：2019-01-14

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('form1');
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($('#form1')[0]);
        $.ajax({
            url: 'server.php',
            type: 'POST',
            data: data,
            dataType: 'JSON',
            cache: false,
            processData: false,
            contentType: false
        }).done(function(ret){
            if(ret['isSuccess']){
                var result = '';
                result += 'name=' + ret['name'] + '<br>';
                result += 'gender=' + ret['gender'] + '<br>';
                result += '<img src="' + ret['photo']  + '" width="100">';
                $('#result').html(result);
            }else{
                alert('提交失敗');
            }
        });
        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['name'])? $_POST['name'] : '';
$gender = isset($_POST['gender'])? $_POST['gender'] : '';

$filename = time().substr($_FILES['photo']['name'], strrpos($_FILES['photo']['name'],'.'));

$response = array();

if(move_uploaded_file($_FILES['photo']['tmp_name'], $filename)){
    $response['isSuccess'] = true;
    $response['name'] = $name;
    $response['gender'] = $gender;
    $response['photo'] = $filename;
}else{
    $response['isSuccess'] = false;
}

echo json_encode($response);
?>

本文轉自：http://www.codeceo.com/article/php-html5-formdata-upload.html

PHP結合HTML5使用FormData物件提交表單及上傳圖片

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

FormData物件提交表單及上傳圖片/檔案

1.建立一個FormData空物件，然後使用append方法新增key/value var formdata = new FormData(); formdata.append('name','fdipzone'); formdata.append('gender','male');

使用FormData物件提交表單及上傳圖片

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

ajax 請求後臺資料(及使用FormData物件提交表單及上傳圖片）

js <script type="text/javascript"> $(function(){ $('#submit').click

H5用FormData物件提交表單及上傳檔案

1、如何使用 use multipart/form-data when your form includes any <input type="file"> elements. 2、怎麼

C# Asp.net使用FormData對象實現ajax提交表單及上傳圖片

sync ext syn data .... error post req 序列化 1、html代碼： <form id="postForm"> 文件名：<input type="text" name="filename" />

使用formData物件提交表單並上傳圖片

FormData 物件，可以把form中所有表單元素的name與value組成一個queryString，提交到後臺。如果把表單的編碼型別設定為：enctype =‘multipart/form-da

怎麼用非同步ajax提交表單來上傳圖片檔案？

通常我們提交（使用submit button）時，會把form中的所有表格元素的name與value組成一個queryString，提交到後臺。這用jQuery的方法來說，就是serialize。通過$('#postForm').serialize()可以對form表單進行序

CURL模擬表單post提交及相關常用引數的使用（包括提交表單同時上傳檔案）

<form action="doLogin" method="post"> <input type="text" name="username" value="admin"/> <input type="password" nam

form表單，上傳圖片及展示

pen bdc type comm 之前 jpg ctype turn ali .comment_con .file{position: relative;top:2rem;z-index: 999;width: 5rem;height: 5rem;background:

關於C++使用libcurl提交表單方式上傳檔案時提交表單引數[同HTML表單]

C++與Java後臺互動，避免不了使用HTTP協議，這時候對於C++來說libcurl就派上用場了，簡單的引數傳遞比較簡單，涉及到檔案上傳和下載的時候就稍微複雜點了，具體示例如下： int http_post_file(const char *url, c

jfinal利用form表單同時上傳圖片和text

一：頁面 <form class="form-horizontal" action="/users/upload" method="post" enctype="multipart/form-data" name="myform" id="myform"><

php+Angularjs 實現Post 提交表單模擬登入

1、在開始之前我們要了解下angularjs的$http函式，post請求可以簡寫成$http.post 同時也可以像jQuery那樣$http(method:'',url:'',params:'')

springmvc中Form表單檔案上傳使用ajax提交

上傳檔案這塊坑真是不少，耽誤了有幾個小時的時間，現在簡單總結一下；首先springmvc的核心xml中配置下MultipartResolver：  <bean id="multipart

JS 將form表單與上傳檔案一起提交

前提需要引入jquery(不然無法使用$.ajax) //js function add(){ var formData = new FormData(document.querySelector("form"));//獲取form值

Jquery不使用form表單非同步上傳檔案的方法

現在的專案中需要使用到不重新整理頁面的方式實現上傳檔案，實現方法如下： html程式碼：檔案:<input id="file" type="file" name="file"/> <butt

Ajax（form表單檔案上傳、請求頭之contentType、Ajax傳遞json資料）

form表單檔案上傳上菜 file_put.html <form action="" method="post" enctype="multipart/form-data"> {# 這裡必須要請求頭格式才能把上傳檔案的物件傳過去 enctype="multipart/form-

window.showModalDialog()使用與form表單檔案上傳以及父子頁面傳值

window.showModalDialog()簡介： (1)使用方法： window.showModalDialog(sURL [, vArguments] [,sFeatures]) (2)引數說明 sURL--必選引數，型別：字串。用來指定對話方塊要顯示的頁面的

mvc 利用form表單檔案上傳

前端頁面 <form action="/my/reviewdata" method="post" enctype="multipart/form-data"> <input class="imgx" name="img" type="file" multiple="mult

表單附件上傳與刪除思路梳理（含前臺程式碼）

附件上傳是進行表單操作時經常會用到的功能，下面詳細介紹前臺檔案上傳程式碼的思路，並附最新程式碼。首先在前臺我們使用的是jQuery的File Upload元件，該元件以jquery的ajax為基礎，支援多檔案的上傳、取消和刪除，在使用該元件前，需要引入

PHP結合HTML5使用FormData物件提交表單及上傳圖片

相關推薦