php 下 html5 XHR2 + FormData + File API 上传文件
FormData的作用：
<!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>
<!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>
<!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";
}
<!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 上传文件的更多相关文章
- 返璞归真 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 上传文件, ...
- 演示如何通过 web api 上传文件MVC40
演示如何通过 web api 上传文件WebApiWebFormHost/UploadFileController.cs /* * 通过 web api 上传文件 */ using System; u ...
- html5 如何实现客户端验证上传文件的大小
在HTML 5中,现在可以在客户端进行文件上传时的校验了,比如用户选择文件后,可以 马上校验文件的大小和属性等.本文章向码农介绍html5 如何实现客户端验证上传文件的大小,感兴趣的码农可以参考一下. ...
- .Net使用HttpClient以multipart/form-data形式post上传文件及其相关参数
前言: 本次要讲的是使用.Net HttpClient拼接multipark/form-data形式post上传文件和相关参数,并接收到上传文件成功后返回过来的结果(图片地址,和是否成功).可能有很多 ...
- C# Web Api 上传文件
一. 使用默认方法上传文件: 1.Action: /// <summary> /// 上传文件 使用上传后的默认文件名称 /// 默认名称是BodyPart_XXXXXX,BodyPart ...
- WebAPI通过multipart/form-data方式同时上传文件以及数据（含HttpClient上传Demo）
简单的Demo,用于了解WebAPI如何同时接收文件及数据,同时提供HttpClient模拟如何同时上传文件和数据的Demo,下面是HttpClient上传的Demo界面 1.HttpClient部分 ...
- .Net C#向远程服务器Api上传文件
Api服务代码一: /// <summary> /// 服务器接收接口 /// </summary> [HttpPost] [Route("ReceiveFile&q ...
- 使用python3.7+Vue.js2.0+Django2.0.4异步前端通过api上传文件到七牛云云端存储
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_130 之前一篇文章是通过普通js+tornado来上传七牛云:使用Tornado配合七牛云存储api来异步切分上传文件,本次使用v ...
- 1.5 WEB API 上传文件
1.前提,设置跨域 2.在控制器头添加允许跨域 /// <summary> /// 文件管理口控制器 /// </summary> [EnableCors("*&qu ...
随机推荐
- Hive环境的安装部署（完美安装）（集群内或集群外都适用）（含卸载自带mysql安装指定版本）
Hive环境的安装部署(完美安装)(集群内或集群外都适用)(含卸载自带mysql安装指定版本) Hive 安装依赖 Hadoop 的集群,它是运行在 Hadoop 的基础上. 所以在安装 Hive 之 ...
- 让“懒惰” Linux 运维工程师事半功倍的 10 个关键技巧！
好的Linux运维工程师区分在效率上.如果一位高效的Linux运维工程师能在 10 分钟内完成一件他人需要 2 个小时才能完成的任务,那么他应该受到奖励(得到更多报酬),因为他为公司节约了时间,而时间 ...
- 并发基础（二） Thread类的API总结
Thread 类是java中的线程类,提供给用户用于创建.操作线程.获取线程的信息的类.是java线程一切的基础,掌握这个类是非常必须的,先来看一下它的API: 1.字段摘要 static int M ...
- tcp协议和udp协议的使用场景
一:什么是TCP(Transmission Control Protocol,传输控制协议) tcp是面向连接的协议,也就是说,在收发数据前,必须和对方建立可靠的连接.一个TCP连接必须要经过三次 ...
- 温故而知新复习下PHP面向对象
面向对象在PHP中是以类的形势展示的 PHP中的类是单继承的,用关键字extends来实现继承父类, 关键字public protected private 第一个是公开的 谁都可以访问,第二个只能本 ...
- CPU，寄存器，一缓二缓.... RAM ROM 外部存储器等简介
自我学习:一.线程安全日期格式化操作的几种方式:1.每次new一个新对象:public static Date parse(String date) throws ParseException { r ...
- (4/24) webpack3.x快速搭建本地服务和实现热更新
写在前面: (1)为了防止版本兼容问题,此处的webpack版本与之前的一致为:webpack@3.6.0.同时这里我们安装的webpack-dev-server版本是2.9.7版本. (2)之前已经 ...
- jquery 的 $.extend 和 $.fn.extend
$.extend({ add:function(a,b){return a+b;}, bad:function(a,b){return a-b;} }); $.fn.extend({ loading: ...
- as3 加载gif loader
as3原生不支持gif动态图 loader 加载gif ,内容只是以bitmap加载进来 需要动态,另外衍生类: https://files.cnblogs.com/files/dt1991/GifL ...
- Optimizing graphics performance
看U3D文档,心得:对于3D场景,使用分层次的距离裁剪,小物件分到一个层,稍远时就被裁掉,大物体分到一个层,距离很远时才裁掉,甚至不载.中物体介于二者之间. 文档如下: Good performanc ...