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. 组件Slate教程 & UMG widget构造初始化函数中获取其内部组件

    转自:http://aigo.iteye.com/blog/2296218 目的:在自定义的Widget初始化完毕后,获取其内部的button.combo等UMG组件的C++指针. 这里我们新建了一个 ...

  2. 图文并茂 RAID 技术全解 – RAID0、RAID1、RAID5、RAID100

    RAID 技术相信大家都有接触过,尤其是服务器运维人员,RAID 概念很多,有时候会概念混淆.这篇文章为网络转载,写得相当不错,它对 RAID 技术的概念特征.基本原理.关键技术.各种等级和发展现状进 ...

  3. Bogart BogartPublic.vb

    Imports System.Data.SqlClient Imports System.Data #Region "IBogartToolbar,請勿隨便更改" Interfac ...

  4. ZABBIX监控80连接数

    自定义监控项(监控网站80连接数 http://blog.51cto.com/shuzonglu/2104195

  5. HTML5 Canvas ( 文字的度量 ) measureText

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 使用django + celery + redis 异步发送邮件

    参考:http://blog.csdn.net/Ricky110/article/details/77205291 环境: centos7  +  python3.6.1 + django2.0.1  ...

  7. PuTTY免输密码自动登录Linux

    1.使用PuTTY安装目录里的puttygen.exe工具.先点“生成(Generate)”,然后随意移动鼠标直到进度条填满,即可生成密钥 公钥部分:把上边那一段文字全选->复制备用.(不要点击 ...

  8. HIBERNATE知识复习记录3-关联关系

    先上一张图,关于几种关系映射: 抄一段解释: 基本映射是对一个实体进行映射,关联映射就是处理多个实体之间的关系,将关联关系映射到数据库中,所谓的关联关系在对象模型中有一个或多个引用.关联关系分为上述七 ...

  9. clamav杀毒软件的安装

    Linux Unix.Trojan.Elknot (Linux.BackDoor.Gates.5)木马清理 此恶意软件结合了传统后门程序和DDoS攻击木马的功能 前两天性能测试服务器被种马,cpu一直 ...

  10. pyorient

    简介 pyorient是orientdb的python库 该库提供两种访问orientdb的方式:1.client 的方式 2.ogm 的方式(类似于ORM) 由于OGM 封装了client,且由于O ...