FormData的作用：

FormData对象可以帮助我们自动的打包表单数据，通过XMLHttpRequest的send()方法来提交表单。当然FormData也可以动态的append数据。FormData的最大优点就是我们可以异步上传一个二进制文件。
例1如下：
<!DOCTYPE HTML>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <form method="post" id="myForm" onsubmit="return post();">

        用户名<input type="text" name="uname" />

        密码<input type="password" name="upwd" />

        邮箱<input type="text" name="uemail" />

        <input type="submit" name="submit" value="提交" />

    </form>

</body>

<script type="text/javascript">

function post() {

    var myForm = document.getElementById("myForm");

    //FormData既可以从表单读取数据，也可以动态append(键,值)添加

    var fd = new FormData(myForm);

    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function () {

        if (xhr.readyState == 4) {

            alert(this.responseText);

        }

    };

    xhr.open("post", "post.php", true);

    xhr.send(fd);

    return false;

}

</script>

</html>
File API
使用HTML5 DOM新增的File API，现在可以让网页要求用户选择本地文件，并且读取这些文件的信息了。
通过File API，我们可以在用户选取一个或者多个文件之后，访问到代表了所选文件的一个或多个File对象，这些对象被包含在一个FileList对象中。
<!DOCTYPE HTML>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <form method="post" id="myForm">

        <input type="file" name="file" id="upfile" />

        <input type="submit" name="submit" value="提交" />

    </form>

</body>

<script type="text/javascript">

    var upfile = document.getElementById("upfile");

    upfile.onchange = function() {

        var file = this.files[0];

        alert("文件名:" + file.name + "\r\n" + "大小:" + file.size + "\r\n");

    };

</script>

</html>
我们通过FormData + File API 上传文件
<!DOCTYPE HTML>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <form method="post" id="myForm">

        <input type="file" name="file" id="upfile" />

        <input type="submit" name="submit" value="提交" />

    </form>

</body>

<script type="text/javascript">

    var myForm = document.getElementById("myForm");

    var upfile = document.getElementById("upfile");

    myForm.onsubmit = function() {

        //我们创建一个FormData对象

        var fd = new FormData();

        var file = upfile.files[0];

        //把文件添加到FormData对象中

        fd.append("file", file);

        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function () {

            if (xhr.readyState == 4) {

                alert(this.responseText);

            }

        };

        xhr.open("post", "upfile.php", true);

        //发送FormData对象

        xhr.send(fd);

        return false;

    };

</script>

</html>

upfile.php代码如下：

<?php

$uploadDir = './upload/';

if(!file_exists($uploadDir)) {

    @mkdir($uploadDir, 0777, true);

}

$uploadFile = $uploadDir . basename($_FILES['file']['name']);

if(move_uploaded_file($_FILES['file']['tmp_name'], $uploadFile)) {

    echo "OK";

} else {

    echo "NO";

}
使用对象URL来显示你所选择的图片
通过window.URL.createObjectURL()和 window.URL.revokeObjectURL()两个DOM方法。
这两个方法创建简单的URL字符串对象，用于指向任何 DOM File 对象数据，包括用户电脑中的本地文件。
<!DOCTYPE HTML>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <form method="post" id="myForm">

        <input type="file" name="file" id="upfile" />

        <input type="submit" name="submit" value="提交" />

    </form>

</body>

<script type="text/javascript">

    var myForm = document.getElementById("myForm");

    var upfile = document.getElementById("upfile");

    upfile.onchange = function() {

        //创建一个img标签

        var img = document.createElement("img");

        //通过file对象创建对象URL

        img.src = window.URL.createObjectURL(this.files[0]);

        img.height = 60;

        img.onload = function() {

            //释放对象URL

            window.URL.revokeObjectURL(this.src);

        };

        document.body.appendChild(img);

    };

    myForm.onsubmit = function() {

        //我们创建一个FormData对象

        var fd = new FormData();

        var file = upfile.files[0];

        //把文件添加到FormData对象中

        fd.append("file", file);

        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function () {

            if (xhr.readyState == 4) {

                alert(this.responseText);

            }

        };

        xhr.open("post", "upfile.php", true);

        //发送FormData对象

        xhr.send(fd);

        return false;

    };

</script>

</html>

php 下 html5 XHR2 + FormData + File API 上传文件的更多相关文章

  1. 返璞归真 asp.net mvc (11) - asp.net mvc 4.0 新特性之自宿主 Web API, 在 WebForm 中提供 Web API, 通过 Web API 上传文件, .net 4.5 带来的更方便的异步操作

    原文:返璞归真 asp.net mvc (11) - asp.net mvc 4.0 新特性之自宿主 Web API, 在 WebForm 中提供 Web API, 通过 Web API 上传文件, ...

  2. 演示如何通过 web api 上传文件MVC40

    演示如何通过 web api 上传文件WebApiWebFormHost/UploadFileController.cs /* * 通过 web api 上传文件 */ using System; u ...

  3. html5 如何实现客户端验证上传文件的大小

    在HTML 5中,现在可以在客户端进行文件上传时的校验了,比如用户选择文件后,可以 马上校验文件的大小和属性等.本文章向码农介绍html5 如何实现客户端验证上传文件的大小,感兴趣的码农可以参考一下. ...

  4. .Net使用HttpClient以multipart/form-data形式post上传文件及其相关参数

    前言: 本次要讲的是使用.Net HttpClient拼接multipark/form-data形式post上传文件和相关参数,并接收到上传文件成功后返回过来的结果(图片地址,和是否成功).可能有很多 ...

  5. C# Web Api 上传文件

    一. 使用默认方法上传文件: 1.Action: /// <summary> /// 上传文件 使用上传后的默认文件名称 /// 默认名称是BodyPart_XXXXXX,BodyPart ...

  6. WebAPI通过multipart/form-data方式同时上传文件以及数据（含HttpClient上传Demo）

    简单的Demo,用于了解WebAPI如何同时接收文件及数据,同时提供HttpClient模拟如何同时上传文件和数据的Demo,下面是HttpClient上传的Demo界面 1.HttpClient部分 ...

  7. .Net C#向远程服务器Api上传文件

    Api服务代码一: /// <summary> /// 服务器接收接口 /// </summary> [HttpPost] [Route("ReceiveFile&q ...

  8. 使用python3.7+Vue.js2.0+Django2.0.4异步前端通过api上传文件到七牛云云端存储

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_130 之前一篇文章是通过普通js+tornado来上传七牛云:使用Tornado配合七牛云存储api来异步切分上传文件,本次使用v ...

  9. 1.5 WEB API 上传文件

    1.前提,设置跨域 2.在控制器头添加允许跨域 /// <summary> /// 文件管理口控制器 /// </summary> [EnableCors("*&qu ...

随机推荐

  1. asp.net webapi 自托管插件式服务(转）

    asp.net webapi 自托管插件式服务   webapi问世已久,稀里糊涂的人哪它都当mvc来使,毕竟已mvc使用级别的经验就可以应对webapi. webapi和mvc在asp.net5时代 ...

  2. VS自动编译脚本

    rem ************************************************rem * Script to compile the solutions of IdealOE ...

  3. ECCV 2018 | 旷视科技提出统一感知解析网络UPerNet，优化场景理解

    全球计算机视觉三大顶会之一 ECCV 2018(European Conference on Computer Vision)即将于 9 月 8 -14 日在德国慕尼黑拉开帷幕.届时,旷视首席科学家孙 ...

  4. Samba 简介

    SMB 代表的是服务器消息块 (Server Message Block),它是用于在 Windows 上共享文件的协议的原始名称. CIFS 代表公共 Internet 文件系统 (Common I ...

  5. SSH 在ssh-copy-id 之后仍需输入密码的问题

    最近在使用Ansible,基于SSH. 远程服务器IP: 192.168.200.193 以下提及的远程服务器都为该服务器. 远程用户: ansible_user 在本地服务器中,ssh-keygen ...

  6. 解决Sybase PowerDesigner 数据库设计中 Name 自动填充Code

    在使用 Sybase PowerDesigner 进行数据库设计时,为了理清思路,需要将name改为中文名称,但是这个软件会自动将name填 充为code,可以通过如下配置修改: 选择tools-&g ...

  7. 9. PD逆向工程--由数据库转为模型(ER图)

    步骤: 1. 在控制面板-->管理工具(如果没找到管理工具,查看方式改为大图标)-->数据源(ODBC)-->用户DSN -->用户数据源下添加一个数据源(这里根据情况添加数据 ...

  8. Selenium Webdriver——操作隐藏的元素

    有时候我们会碰到一些元素不可见,这个时候selenium就无法对这些元素进行操作了.例如,下面的情况: 页面主要通过“display:none”来控制整个下拉框不可见.这个时候如果直接操作这个下拉框, ...

  9. jquery 的 $.extend 和 $.fn.extend

    $.extend({ add:function(a,b){return a+b;}, bad:function(a,b){return a-b;} }); $.fn.extend({ loading: ...

  10. myeclipse 代码提示

    from http://fuyiyuan2011.iteye.com/blog/1258264 在软件开发过程中,有了代码提示能使开发能够更加快捷与便利.但在Eclipse ,MyEclipse等ja ...