表单提交，文件上传是一个常用又十分麻烦的功能，以前要上传文件通常都是借助插件或者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. 使用VS Code开发.Net Core 2.0 MVC Web应用程序教程之一

    好吧,现在我们假设你已经安装好了VS Code开发工具..Net Core 2.0预览版的SDK dotnet-sdk-2.0.0(注意自己的操作系统),并且已经为VS Code安装好了C#扩展(在V ...

  2. webpack快速入门——CSS分离与图片路径处理

    1.在终端安装extract-text-webpack-plugin 2.引入插件 const extractTextPlugin = require("extract-text-webpa ...

  3. 【xsy1378】 水题7号 贪心

    题目大意:有$m$组约束关系$(x_i,y_i)$,你要构造一个排列,满足数$x_i$出现在数$y_i$前面,请使得这个排列字典序最小,请输出这个排列.无解请输出-1. 数据范围:$n,m≤10^5$ ...

  4. 【hdu6121】 Build a tree 简单数学题

    题目传送门:http://acm.hdu.edu.cn/showproblem.php?pid=6121 我好像推得挺久的诶..... 题目大意:给你一棵有$n$个点的树,根节点为$0$,对于其余节点 ...

  5. 剑指offer四十五之扑克牌顺子（序列是否连续）

    一.题目 LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到的话,他决 ...

  6. litespeed 下配置 伪静态，反向代理

    <IfModule mod_rewrite.c>RewriteEngine onRewriteBase / RewriteRule ^(.*).html$ index.php?static ...

  7. 关于注解Annotation第二篇

    写一个注解使用类,如下: public class Test { @Code(author = "mazhi",date="20170611") private ...

  8. 【Xmail】使用Xmail搭建局域网邮件服务器

    下载地址:  http://www.xmailserver.org/xmail-1.27.win32bin.zip,当前最新版本  1.27. 解压文件:xmail-1.27.win32bin.zip ...

  9. 不会几个框架，都不好意思说搞过前端： React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  10. 使用DateTime的ParseExact方法实现特殊日期时间的方法详解（转）

    本篇文章是对使用DateTime的ParseExact方法实现特殊日期时间的方法进行了详细的分析介绍,需要的朋友参考下 今天遇到一个特别的需求,需要从下面的字符串中转换成一个DateTime对象: [ ...