表单提交，文件上传是一个常用又十分麻烦的功能，以前要上传文件通常都是借助插件或者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. 在centOS 7 中安装 MySQL

    知道来源:https://www.cnblogs.com/bigbrotherer/p/7241845.html 1 下载并安装MySQL官方的 Yum Repository [root@localh ...

  2. Linux必备命令

      目录                                                              概述 常用系统工作命令 系统状态检测命令 工作目录切换命令 文本文件 ...

  3. input验证码框，输入非数字或非12位时，红框提示;每4位加一个空格

    以下代码:input验证码框,输入非数字或非12位时,红框提示;每4位加一个空格 //input验证码框,输入非数字或非12位时,红框提示;每3位加一个空格 $(".text"). ...

  4. 【Canal源码分析】Canal Server的启动和停止过程

    本文主要解析下canal server的启动过程,希望能有所收获. 一.序列图 1.1 启动 1.2 停止 二.源码分析 整个server启动的过程比较复杂,看图难以理解,需要辅以文字说明. 首先程序 ...

  5. 使用vue模拟购物车小球动画

    使用vue模拟购物车小球动画 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> < ...

  6. c# static用法

    有时候写程序时常常遇到这样的情况:   1.定义了变量和方法不知道什么时候该加上static修饰符. 2.static变量和方法与非static变量和方法有什么区别? 3.在一个类的静态方法里为什么不 ...

  7. 《Mysql技术内幕，Innodb存储引擎》——索引与算法

    B+树 B+树中,所有记录节点都按照键值的大小顺序放在同一层叶子节点,各个叶子节点指针进行连接. 图中指针是单向的,但是书上的图是双向的,而且旋转应该也是双向才能完成) B+树插入处理 Leaf Pa ...

  8. asterisk与freepbx常用的命令

    asterisk 常用命令: 通过asterisk -r 连接我们的asterisk. 在CLI中常用的命令: sip show peers 显示所有的SIP peers(包括friends) sip ...

  9. mac 上安装 redis

    1.从http://redis.io 下载redis包,这里选择了redis-3.2.3 2.将下载的 redis-3.2.3.tar.gz 包拷贝到 /usr/local 目录 3.执行 sudo ...

  10. boost::asio基本使用

    一.Asio网络库 截止到C++17,C++标准库都没有加入网络通信库.实际项目网络编程是非常常见的功能,直接使用操作系统API是低效率且不稳定的,比较好的方法是借助第三方成熟可靠的网络库.据我所知C ...