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>

备注

时间: 2024-10-12 07:36:09

HTML5 中已经可以用 Ajax 上传文件了,而且代码非常简单,借助 FormData 类即可发送文件数据。的相关文章

使用ajax上传文件

有时候我们需要在web端向服务器上传文件,以前是使用form的方式进行提交,html5中支持直接使用xmlhttprequest上传文件,send对象支持blob对象而文件就是一个blob对象 ajax上传文件 ajax中可以通过参数processData这个参数来控制data是否进行转换,我们将这个参数设置为false就可以使用ajax进行文件的上传操作了 example: $.ajax({ url: "your url", type: "POST", proce

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

本文对如何实现使用Ajax提交"multipart/form"格式的表单数据,已经如何在图片上传之前,在浏览器上进行预览.使用的主要相关技术HTML5的FILE API,XMLHttprequest Level2中对二进制文件上传的支持(通过构建FormData对象进行支持)以及Servlet 3.0支持的Multiconfig注解来支持文件的上传.在Servlet 3.0 规范之前通常使用第三方库如commons-fileupload进行解决文件上传. HTML5 中的 File 对

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

一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如flash文件需与页面同父文件夹,JavaScript文件大小也很可观. 我之前曾翻译编辑过一篇“Ajax Upload多文件上传插件”的文章,此插件的亮点是使用隐藏的iframe框架页面模拟ajax上传,但是,实际上,还是一次只能上传1张图片,可以多次上传而已. HTML5是个好东东,其中之一就是支

使用html5特性--ajax上传文件

在html5以前,ajax上传文件算是一个比较麻烦的事,要是想显示一下上传进度就更不容易.遇到这种情况往往需要借助于第三方插件,比如jquery.fileupload.js.如今html5已经技术已经变成一个非常流行.非常新潮的技术了,各个浏览器厂商也实现了不少的html5规范,如今文件上传有了html5的支持已经变的相当容易了,我自己尝试了一下用javascript原生的api来实现ajax上传文件,为了页面不至于太丑,我使用了bootstrap的一些组件,先上效果图: 实现的功能介绍: aj

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

html5多图控件<input id="fileImage" type="file" size="30" name="files[]" multiple /> multiple 这个input的特性是html5新有的,所以IE6这么低级的货是无法兼容的. 这个属性相当于以前的这样的多图情况 <input id="fileImage" type="file" size=&

eclipse中导入jdk源码、SpringMVC注解@RequestParam、SpringMVC文件上传源码解析、ajax上传excel文件

eclipse中导入jdk源码:http://blog.csdn.net/evolly/article/details/18403321, http://www.codingwhy.com/view/799.html. ------------------------------- SpringMVC注解@RequestParam:http://825635381.iteye.com/blog/2196911. --------------------------- SpringMVC文件上传源

使用ajax上传中遇到的问题

使用ajaxSubmit提交文件时,正确使用返回的json数据需要用eval在转化一下. 前台文件: $("#form1").ajaxSubmit({ url: 'QueryHandler.ashx', success: function (data) { var json = eval("(" + data + ")"); alert(json.Total); } }); 后台: context.Response.ContentType = &

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

atitit.ajax上传文件的实现原理 与设计 1. 上传文件的三大难题 1 1.1. 本地预览 1 1.2. 无刷新 1 1.3. 进度显示 1 2.  传统的html4  + ajax 是无法直接实现上传文件 1 2.1. 传统的实现方式iframe 2 2.2. html5转码base64 3 2.3. 其它插件FLASH的实现原理 3 3. 上传进度的实现原理 3 3.1. 使用ajax结合服务端的进度返回,比較麻烦 4 4. 本地预览的解决 4 4.1. 用HTML5上传文件 4 5

Ajax上传文件进度条显示

要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显示,就可以 实现上传的进度条效果 前端页面 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax上传文件进度条显示