How to submit forms and upload images using FormData-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to submit forms and upload images using FormData

一个新手

Sep 14, 2017 am 10:52 AM

formdata submit form

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(
'name',' fdipzone');
'gender'
,'male');
2. Obtain 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>

Copy after login

var form = document.getElementById(&#39;form1&#39;);  
var formdata = new FormData(form);

Copy after login

Use FormData to submit forms 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;" 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>

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

The above is the detailed content of How to submit forms and upload images using FormData. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Grow A Garden - Complete Mutation Guide

4 weeks ago By DDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Nordhold: Fusion System, Explained

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Clair Obscur: Expedition 33 UE-Sandfall Game Crash? 3 Ways!

2 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1677

CakePHP Tutorial

1431

Laravel Tutorial

1334

PHP Tutorial

1279

C# Tutorial

1257

Related knowledge

How to implement page jump after PHP form submission Aug 12, 2023 am 11:30 AM

How to implement page jump after PHP form submission [Introduction] In web development, form submission is a common functional requirement. After the user fills out the form and clicks the submit button, the form data usually needs to be sent to the server for processing, and the user is redirected to another page after processing. This article will introduce how to use PHP to implement page jump after form submission. [Step 1: HTML Form] First, we need to write a page containing a form in an HTML page so that users can fill in the data that needs to be submitted.

How to use JavaScript to realize the automatic prompt function of the input box content of the form? Oct 20, 2023 pm 04:01 PM

How to use JavaScript to realize the automatic prompt function of the input box content of the form? Introduction: The automatic prompt function of the form input box content is very common in web applications. It can help users quickly enter the correct content. This article will introduce how to use JavaScript to achieve this function and provide specific code examples. Create the HTML structure First, we need to create an HTML structure that contains the input box and the auto-suggestion list. You can use the following code: <!DOCTYP

How to handle user rights management in PHP forms Aug 10, 2023 pm 01:06 PM

How to handle user rights management in PHP forms With the continuous development of web applications, user rights management is one of the important functions. User rights management can control users' operating rights in applications and ensure the security and legality of data. In PHP forms, user rights management can be implemented through some simple code. This article will introduce how to handle user rights management in PHP forms and give corresponding code examples. 1. Definition and management of user roles First of all, defining and managing user roles is a matter of user rights.

How to use JavaScript to implement real-time verification of the input box content of a form? Oct 18, 2023 am 08:47 AM

How to use JavaScript to implement real-time verification of the input box content of a form? In many web applications, forms are the most common way of interaction between users and the system. However, the content entered by the user often needs to be validated to ensure the accuracy and completeness of the data. In this article, we will learn how to use JavaScript to implement real-time verification of the content of the form's input box and provide specific code examples. Creating the form First we need to create a simple table in HTML

How to use HTML, CSS and jQuery to realize the advanced function of automatic saving of forms Oct 28, 2023 am 08:20 AM

How to use HTML, CSS and jQuery to implement the advanced function of automatic saving of forms. Forms are one of the most common elements in modern web applications. When users enter form data, how to implement the automatic saving function can not only improve the user experience, but also ensure data security. This article will introduce how to use HTML, CSS and jQuery to implement the automatic saving function of the form, and attach specific code examples. 1. Structure of HTML form. Let’s first create a simple HTML form.

MySQL transaction processing: the difference between automatic submission and manual submission Mar 16, 2024 am 11:33 AM

MySQL transaction processing: the difference between automatic submission and manual submission. In the MySQL database, a transaction is a set of SQL statements. Either all executions are successful or all executions fail, ensuring the consistency and integrity of the data. In MySQL, transactions can be divided into automatic submission and manual submission. The difference lies in the timing of transaction submission and the scope of control over the transaction. The following will introduce the difference between automatic submission and manual submission in detail, and give specific code examples to illustrate. 1. Automatically submit in MySQL, if it is not displayed

PHP form processing: form data query and filtering Aug 07, 2023 pm 06:17 PM

PHP form processing: form data query and filtering Introduction In Web development, forms are an important way of interaction. Users can submit data to the server through forms for further processing. This article will introduce how to use PHP to process the query and filter functions of form data. Form design and submission First, we need to design a form that includes query and filter functions. Common form elements include input boxes, drop-down lists, radio buttons, check boxes, etc., which can be designed according to specific needs. When the user submits the form, the data will be sent to POS

How to set up a secure HTTPS connection for a PHP form? Aug 17, 2023 pm 03:25 PM

How to set up a secure HTTPS connection for a PHP form? As the Internet develops, security becomes more and more important in web development. The encrypted transmission protocol HTTPS plays a key role in protecting data transmission. When using PHP forms for data transmission, we can take some measures to ensure the security of the connection. This article will guide you on how to set up a secure HTTPS connection for PHP forms, with some code examples. Purchase an SSL Certificate First, you need to purchase an SSL Certificate. SSL certificate is a guaranteed website

See all articles