<?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 类即可发送文件数据。的更多相关文章

  1. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

  2. 基于HTML5的可预览多图片Ajax上传

    一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...

  3. 基于HTML5和JSP实现的图片Ajax上传和预览

    本文对如何实现使用Ajax提交"multipart/form"格式的表单数据,已经如何在图片上传之前,在浏览器上进行预览.使用的主要相关技术HTML5的FILE API,XMLHt ...

  4. 基于HTML5多图片Ajax上传可预览

    html5多图控件<input id="fileImage" type="file" size="30" name="fil ...

  5. HTML5可预览多图片ajax上传(使用formData传递数据)

    HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...

  6. 在jquery中，使用ajax上传文件和文本

    function onSubmit (data) { //获取文本 var callingContent = $('#callingContent').val() // 获取文件 var files ...

  7. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  8. Ajax上传文件进度条显示

    要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...

  9. atitit.ajax上传文件的实现原理 与设计

    atitit.ajax上传文件的实现原理 与设计 1. 上传文件的三大难题 1 1.1. 本地预览 1 1.2. 无刷新 1 1.3. 进度显示 1 2.  传统的html4  + ajax 是无法直 ...

随机推荐

  1. 这是高手最常用的第一快捷组合键 - imsoft.cnblogs

    1.锁定电脑 2.要找电脑上的文件时,一般人会先找到“我的电脑”,然后点击打开,而高手总是很酷的,轻轻按下键盘上的Windows键不放然后再按E键,直接打开电脑的资源管理器,而一般人还在慢慢寻找“我的 ...

  2. BIOS设置

    主界面:  标准BLOS设置: 高级BLOS设置: 1.设置从光盘驱动 电脑启动时默认是从硬盘启动,但是在安装操作系统时或者是使用某些特殊软件时,可能需要从光盘.软盘或者U盘启动,这时就需要设置第一启 ...

  3. ANTLR3完全参考指南读书笔记[01]

    引用 Terence Parr. The Definitive ANTLR Reference, Building Domain Specific Languages(antlr3 version). ...

  4. 修饰符（static、final、abstract）第一篇

    三个修饰符: 一.static: 作用域: 1. 属性 1.1 静态属性不必要创建新对象,可直接用类调用 1.2 其值发生改变,则类中的值也会随之而变并延伸到其他对象中 例子: class Anima ...

  5. iPhone4@iOS7Beta4，第一时间刷上，失望，看来苹果是铁了心往扁平化UI走了。看好我的614，保存好SHSH准备

    1 今天早上看到新闻,iOS7Beta4放出了,于是赶紧,在家下载,网速很快.(要是在公司,那50K的速度,估计会疯的) 2 等了一会儿一直在提示准备安装,不等了,再等该迟到了. 3 路上实在忍不住, ...

  6. poj3249 Test for Job ——拓扑+DP

    link:http://poj.org/problem?id=3249 在拓扑排序的过程中进行状态转移,dp[i]表示从起点到 i 这个点所得到的的最大值.比如从u点到v点,dp[v]=max(dp[ ...

  7. linux之mysql启动问题

    网站总是挂掉,查看到原来是mysql总是莫名其妙的挂掉 1.查看mysql日志的位置 mysql> show VARIABLES like '%log%'; +----------------- ...

  8. Python Tornado

    按照http://www.tornadoweb.cn/所提供的方法下载安装后编写如下程序: import tornado.ioloop import tornado.web class MainHan ...

  9. UVA11324 强连通+dp记忆化搜索

    题意:对于一个有向图,问最大团中有多少点,要求该点集内所有点对间至少有一条路径(u到v或v到u或两条都有). 首先,对于每一个强连通分量,其中的所有点必然能够互相到达,所以先进行缩点,然后对于缩点后的 ...

  10. 嵌入式系统Linux内核开发工程师必须掌握的三十道题（转）

    嵌入式系统Linux内核开发工程师必须掌握的三十道题 如果你能正确回答以下问题并理解相关知识点原理,那么你就可以算得上是基本合格的Linux内核开发工程师,试试看! 1) Linux中主要有哪几种内核 ...