表单提交，文件上传是一个常用又十分麻烦的功能，以前要上传文件通常都是借助插件或者flash来实现，噼里啪啦的加载一大堆东西。自从有了HTML5的FormData后，老板再也不用担心我的上传了。

FormData可以把它理解成一个虚拟的表单对象，它只有一个方法append，这个可以在浏览器console一下就知道了。我们可以通过append向FormData里面添加各种需要提交的数据。

你可以先创建一个空的 FormData 对象,然后使用 append() 方法向该对象里添加字段，如下：var oMyForm = new FormData();



oMyForm.append("username", "Groucho");

oMyForm.append("accountnum", 123456); // 数字123456被立即转换成字符串"123456"

// fileInputElement中已经包含了用户所选择的文件

oMyForm.append("userfile", fileInputElement.files[0]);var oReq = new XMLHttpRequest();

oReq.open("POST", "http://foo.com/submitform.php");

oReq.send(oMyForm);

如果已经有一个Form表单，只需要把这个 form 元素作为参数传入 FormData 构造函数即可：

var newFormData = new FormData(someFormElement);
var formElement = document.getElementById("myFormElement");

var oReq = new XMLHttpRequest();

oReq.open("POST", "submitform.php");

oReq.send(new FormData(formElement));

你还可以在已有表单数据的基础上，继续添加新的键值对，如下：

var formElement = document.getElementById("myFormElement");

formData = new FormData(formElement);

formData.append("serialnumber", serialNumber++);

oReq.send(formData);
<form enctype="multipart/form-data" method="post" name="fileinfo">

  <label>Your email address:</label>

  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />

  <label>Custom file label:</label>

  <input type="text" name="filelabel" size="12" maxlength="32" /><br />

  <label>File to stash:</label>

  <input type="file" name="file" required />

</form>

<div id="output"></div>

<a href="javascript:sendForm()">Stash the file!</a>

然后你就可以使用下面的代码来异步的上传用户所选择的文件：

function sendForm() {

  var oOutput = document.getElementById("output");

  var oData = new FormData(document.forms.namedItem("fileinfo"));

  oData.append("CustomField", "This is some extra data");

  var oReq = new XMLHttpRequest();

  oReq.open("POST", "stash.php", true);

  oReq.onload = function(oEvent) {

    if (oReq.status == 200) {

      oOutput.innerHTML = "Uploaded!";

    } else {

      oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";

    }

  };

  oReq.send(oData);

}

你还可以使用 jQuery 来发送 FormData，但必须要正确的设置相关选项：

var fd = new FormData(document.getElementById("fileinfo"));

fd.append("CustomField", "This is some extra data");

$.ajax({

  url: "stash.php",

  type: "POST",

  data: fd,

  processData: false,  // 告诉jQuery不要去处理发送的数据

  contentType: false   // 告诉jQuery不要去设置Content-Type请求头

});

一个完整的例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>FormData</title>

</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>

</script>

    <script type="text/javascript">

        function fsubmit() {

            var form=document.getElementById("form1");

            var formData=new FormData(form);

            var oReq = new XMLHttpRequest();

            oReq.onreadystatechange=function(){

              if(oReq.readyState==4){

                if(oReq.status==200){

                    var json=JSON.parse(oReq.responseText);

                    var result = '';

                    // result += 'name=' + ret['name'] + '<br>';

                    // result += 'gender=' + ret['gender'] + '<br>';

                     result += '<img src="' + json['photo'] + '" width="100">';

                     $('#result').html(result);

                }

              }

            }

            oReq.open("POST", "server.php");

            oReq.send(formData);

            return false;

        }

    </script>

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

?>

HTML5 FormData实现文件上传实例的更多相关文章

  1. FormData实现文件上传实例

    单提交,文件上传是一个常用又十分麻烦的功能,以前要上传文件通常都是借助插件或者flash来实现,噼里啪啦的加载一大堆东西.自从有了HTML5的FormData后,老板再也不用担心我的上传了. Form ...

  2. 怎么样通过php使用html5实现多文件上传？（php多图上传）

    <!DOCTYPE html><html lang="zh-cn"> <head> <meta charset="utf-8&q ...

  3. PHP中，文件上传实例

    PHP中,文件上传一般是通过move_uploaded_file()来实现的.  bool move_uploaded_file ( string filename, string destinati ...

  4. PHP学习笔记--文件目录操作(文件上传实例)

    文件操作是每个语言必须有的,不仅仅局限于PHP,这里我们就仅用PHP进行讲解 php的文件高级操作和文件上传实例我放在文章的最后部分.--以后我还会给大家写一个PHP类似于网盘操作的例子 注意:阅读此 ...

  5. 构建multipart/form-data实现文件上传

    构建multipart/form-data实现文件上传 通常文件上传都是通过form表单中的file控件,并将form中的content-type设置为multipart/form-data.现在我们 ...

  6. Multipart/form-data POST文件上传详解

    Multipart/form-data POST文件上传详解 理论 简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form ...

  7. Multipart/form-data POST文件上传详解(转)

    Multipart/form-data POST文件上传详解 理论 简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form ...

  8. ExtJS：文件上传实例

    ExtJS:文件上传实例 var ext_dateFormat = 'Y-m-d H:i:s'; var dateFormat = 'yyyy-MM-dd HH:mm:ss'; var date = ...

  9. HTML5矢量实现文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

随机推荐

  1. 【转载】Chrome 0day漏洞：不要用Chrome查看pdf文件

    英文原文地址:https://blog.edgespot.io/2019/02/edgespot-detects-pdf-zero-day-samples.html 中文原文地址:https://ww ...

  2. angular.js的依赖注入解析

    本教程使用AngularJS版本:1.5.3        angularjs GitHub: https://github.com/angular/angular.js/        Angula ...

  3. Windows下安装MySQL详细教程

    Windows下安装MySQL详细教程 1.安装包下载  2.安装教程 (1)配置环境变量 (2)生成data文件 (3)安装MySQL (4)启动服务 (5)登录MySQL (6)查询用户密码 (7 ...

  4. Centos7永久修改IP地址

    Centos7永久修改IP地址 永久修改IP地址,即为设置静态的IP地址. 一.修改IP地址前需要准备的工作 1.虚拟机需要使用桥接的网络模式 虚拟机关机状态下,点击"编辑虚拟机设置&quo ...

  5. php 常见图片处理函数封装

    <?php /** * 常见图像处理函数的封装 */ class Image{ private $info=[]; private $width;//原始图片宽度 private $height ...

  6. 剑指offer二十七之字符串的排列

    一.题目 输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba. 二.思路 我们 ...

  7. (转)python学习笔记5--decimal

    原文:https://blog.csdn.net/lemonwyc/article/details/37583125 上一节提到了除了基本类型之外的decimal,这节就学习下.查看python3.4 ...

  8. EJB3 阶段总结+一个EJB3案例 (1)

    经过一段时时间的学习,对EJB3的相关知识和jboss8的配置有了大概的了解. 网上对EJB的评论很多,基本都是负面的,都表示EJB太过于沉重,不容易维护.但通过这段时间的学习,私下认为,EJB3在某 ...

  9. Vue-router的基本使用

    Vue-router的基本使用 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  10. Intellij-插件安装-安装CodeGenerator插件并且添加Builder模板

    Intellij IDEA 2018.1.2版本 CodeGenerator插件地址:https://github.com/lotabout/CodeGenerator/releases 步骤一:安装 ...