AJAX上传文件
function up_files() {
var fileSelect = document.getElementById('file-select');
var files = fileSelect.files; var formData = new FormData(); for (var i = 0; i < files.length; i++) {
var file = files[i]; if (!file.type.match('image.*')) {
continue;
} formData.append('photos[]', file, file.name);
} var xhr = new XMLHttpRequest(); xhr.open('POST', 'test.php', true); xhr.onload = function () {
if (xhr.status !== 200) {
alert('An error occurred!');
}
}; var progressBar = document.getElementById('progress');
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
progressBar.value = (e.loaded / e.total) * 100;
progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.
}
}; xhr.send(formData);
}
<div id="progress" style="width: 100px;height: 100px;background-color: #0baae4">Test content</div>
<input type="file" id="file-select" name="photos[]" multiple/>
<button onclick="up_files()">上传</button>
test.php 中使用$_FILES 来获取文件信息
原文链接:http://javascript.ruanyifeng.com/bom/ajax.html#toc21
AJAX上传文件的更多相关文章
- IE8/9 JQuery.Ajax 上传文件无效
IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...
- springMVC+jsp+ajax上传文件
工作中遇到的小问题,做个笔记 实现springMVC + jsp + ajax 上传文件 HTML <body> <form id="myform" method ...
- Ajax上传文件进度条显示
要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...
- 伪ajax上传文件
伪ajax上传文件 最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...
- flask jQuery ajax 上传文件
1.html 代码 <div> <form id="uploadForm" enctype="multipart/form-data" > ...
- ajax上传文件显示进度
下面要做一个ajax上传文件显示进度的操作,文末有演示地址 这里先上代码: 1.前端代码 upload.html <!DOCTYPE html> <html lang="e ...
- 闲话ajax,例ajax轮询,ajax上传文件[开发篇]
引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话.供不是特别了解的朋友参考参考! 本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放 ...
- ajax上传文件及进度显示
之前在博文:原生ajax写法就提及过ajax2.0与1.0的差别是多了FormData和利用FormData文件上传(当然还有跨域,但不是本文的重点). 那么具体怎么样实现ajax上传文件呢? 一般来 ...
- django 基于form表单上传文件和基于ajax上传文件
一.基于form表单上传文件 1.html里是有一个input type="file" 和 ‘submit’的标签 2.vies.py def fileupload(request ...
- Ajax 上传文件(input file FormData)
FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据.其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用. jQuery Aj ...
随机推荐
- HDU 4119Isabella's Message2011成都现场赛I题(字符串模拟)
Isabella's Message Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...
- -bash: mysql: command not found 解决办法 (转)
root@DB-02 ~]# mysql -u root-bash: mysql: command not found 原因:这是由于系统默认会查找/usr/bin下的命令,如果这个命令不在这个目录下 ...
- Java为什么使用连接池
一.简介 动态Web站点往往用数据库存储的信息生成Web页面,每一个页面请求导致一次数据库访问.连接数据库不仅要开销一定的通信和内存资源,还必须完成用户验证.安全上下文配置这类任务,因为往往成为最为耗 ...
- Intent MIME 打开各种类型的文件
使用 public class MainActivity extends ListActivity { public static final String path = Environmen ...
- 关于JS历史拓展
js由来 95年那时,绝大多数因特网用户都使用速度仅为28.8kbit/s 的“猫”(调制解调器)上网,但网页的大小和复杂性却不断增加.为完成简单的表单验证而频繁地与服务器交换数据只 ...
- C#程序调用cmd执行命令-MySql备份还原
1.简单实例 //备份还原mysql public static void TestOne() { Process p = new Process(); p.StartInfo.FileName = ...
- 推荐Mac软件Alfred
实在忍不住推荐这个软件了, 身边的朋友们逐渐都在使用Mac OS了,每次我都会推荐Alfred这个软件.推荐来推荐去挺蛮烦的,干脆写篇文章, 下次有朋友新入手Macbook,我就直接附送本文章链接一枚 ...
- 关于一个小bug的修正
python初学者,非常喜欢虫师的文章. 练习时发现一个小bug,http://www.cnblogs.com/fnng/p/3782515.html 验证邮箱格式一题中,第三个x不允许有数字,但是测 ...
- python construct文档
The Basics Fields Fields are the most fundamental unit of construction: they parse (read data from t ...
- JS 闭包问题
一.什么是闭包?“官方”的解释是:所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 相信很少有人能直接看懂这句话,因为他描述的太 ...