HTML5 中已经可以用 Ajax 上传文件了，而且代码非常简单，借助 FormData 类即可发送文件数据。
<?php
if (isset($_POST['upload'])) {
var_dump($_FILES);
move_uploaded_file($_FILES['upfile']['tmp_name'], 'up_tmp/'.time().'.dat');
//header('location: test.php');
exit;
}
?>
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>HTML5 Ajax Uploader</title>
<script src="jquery-2.1.1.min.js"></script>
</head>
<body>
<p><input type="file" id="upfile"></p>
<p><input type="button" id="upJS" value="用原生JS上传"></p>
<p><input type="button" id="upJQuery" value="用jQuery上传"></p>
<script>
/*原生JS版*/
document.getElementById("upJS").onclick = function() {
/* FormData 是表单数据类 */
var fd = new FormData();
var ajax = new XMLHttpRequest();
fd.append("upload", 1);
/* 把文件添加到表单里 */
fd.append("upfile", document.getElementById("upfile").files[0]);
ajax.open("post", "test.php", true);
ajax.onload = function () {
console.log(ajax.responseText);
};
ajax.send(fd);
}
/* jQuery 版 */
$('#upJQuery').on('click', function() {
var fd = new FormData($('#form1')[0]); //这样可以，图片和文本都可以传输
$.ajax({
url: "test.php",
type: "POST",
processData: false,
contentType: false,
data: fd,
success: function(d) {
console.log(d);
}
});
});
</script>
</body>
</html>
备注
HTML5 中已经可以用 Ajax 上传文件了，而且代码非常简单，借助 FormData 类即可发送文件数据。的更多相关文章
- 【javascript】html5中使用canvas编写头像上传截取功能
[javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...
- 基于HTML5的可预览多图片Ajax上传
一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...
- 基于HTML5和JSP实现的图片Ajax上传和预览
本文对如何实现使用Ajax提交"multipart/form"格式的表单数据,已经如何在图片上传之前,在浏览器上进行预览.使用的主要相关技术HTML5的FILE API,XMLHt ...
- 基于HTML5多图片Ajax上传可预览
html5多图控件<input id="fileImage" type="file" size="30" name="fil ...
- HTML5可预览多图片ajax上传(使用formData传递数据)
HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...
- 在jquery中，使用ajax上传文件和文本
function onSubmit (data) { //获取文本 var callingContent = $('#callingContent').val() // 获取文件 var files ...
- IE8/9 JQuery.Ajax 上传文件无效
IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...
- Ajax上传文件进度条显示
要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...
- atitit.ajax上传文件的实现原理 与设计
atitit.ajax上传文件的实现原理 与设计 1. 上传文件的三大难题 1 1.1. 本地预览 1 1.2. 无刷新 1 1.3. 进度显示 1 2. 传统的html4 + ajax 是无法直 ...
随机推荐
- poj 1190 生日蛋糕
中文题 题目分析 搜索题,非常好的剪枝 由于深度一定(m),所以使用深度优先搜索,自上而下的设定蛋糕序号,最顶层的为第1层,……,最底层的蛋糕为第m层,很明显满足题目条件的前i层的(从顶层(也就是编号 ...
- 理解 %IOWAIT (%WIO)
%iowait 是 “sar -u” 等工具检查CPU使用率时显示的一个指标,在Linux上显示为 %iowait,在有的Unix版本上显示为 %wio,含义都是一样的,这个指标常常被误读,很多人把它 ...
- [转]CentOS6.3安装JDK和环境配置
转自:http://www.linuxidc.com/Linux/2012-09/70780.htm 1.CentOS默认情况下,会安装OpenOffice之类的软件,这些软件需要Java的支持,默认 ...
- ZOJ 1041 Transmitters
原题链接 题目大意:有一个发射站,覆盖范围是半径一定的一个半圆.在一个1000*1000平方米的地盘里有很多接收站.给定发射站的圆心,求最佳角度时能覆盖接收站的个数. 解法:本质上就是给一个原点和其他 ...
- UVA 11997 STL 优先队列
题目链接: http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...
- TCP通讯程序设计---5
这里主要包含客户机和服务器的编程. 一.编程模型函数化 使用函数说明:socket的理解 服务器: 创建socket使用函数----->socket 绑定地址使用函数------->bin ...
- Maven项目中找不到maven dependencies library
一般是,workspace中的.classpath文件中有内容丢失造成 在 <classpathentry kind="con" path="org.eclipse ...
- android解析json包（接口）
package com.http.test; 02 03 04 import org.apache.http.HttpResponse; 05 import org.apache.http ...
- eclipse adt 项目依赖，使用git上的项目
从git下载的android工程不能直接导入eclipse,有的项目要依赖这个项目,怎么办呢 好像只能新建一个android项目,然后把libs,res,src,AndroidManifest.xml ...
- solr 主从模式和solrcloud集群模式
主从模式 主节点有单点故障问题:没有主从自动切换,没有failover,主机down掉了的话,整个数据变成只读.并且需要一台机单独做索引,浪费资源,所有数据都需要在这台机器上单独存在一份,索引变化较大 ...