【JavaScript-基础-文件上传】
Upload
最原始方式 form表单提交
// html
<form method="get" action="/test/upload">
<input type="file" name="test" accept="image/jpeg, image/png" />
<input type="submit" value="Submit" />
<!-- <input id="submit" type="button" value ="Submit" /> -->
</form>
兼容性:所有浏览器都支持。
xhr2
关于xhr:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
alert(xhr.resopnseText);
}else{
alert(xhr.statusText);
}
}
xhr.open('get', 'example.php');
xhr.send();
老版本xhr主要属性:
- xhr.readyState:XMLHttpRequest对象的状态,等于4表示数据已经接收完毕。
- xhr.status:服务器返回的状态码,等于200表示一切正常。
- xhr.responseText:服务器返回的文本数据
- xhr.responseXML:服务器返回的XML格式的数据
- xhr.statusText:服务器返回的状态文本。
缺点:
- 不支持读取和传送二进制文件。
- 不能进行进度信息跟踪。
- 受到“同域限制”,只能向同一域名的服务器请求数据。
xhr2
新版本的XMLHttpRequest对象,具有更多的特性:
- 可以设置HTTP请求的时限
- 可以使用FormData对象管理表单数据
- 上传文件
- 跨域请求
- 获取服务器二进制数据
- 可获取数据传输的进度
请求时限
xhr.timeout = 3000;
xhr.ontimeout = function(e){
console.log(e);
}
FormData(HTML5新增属性)
该对象可以模拟表单。
var fdata = new FormData;
var xhr = XMLHttpRequest();
// 添加表单项
fdata.append('username', '张三');
xhr.open('POST', 'test/upload' );
// 最后使用xhr2直接发送该表单对象
xhr.send(fdata);
// 也可以用来获取页面的表单
var form = document.getElementById('testForm');
var fData = new FormData(form);
fData.append('test', 123);
xhr.send(fdata);
// 上传文件
fData.append('name', file) // file 为input[type=file] change事件函数返回的file对象
接受二进制数据
略
progress
新版本xhr对象拥有progress事件。通过onprogress函数监听。
progess事件在该版本中分两种。上传时属于xhr对象,下载时属于xhr.upload对象。
document.getElementById('upload').addEventListener('change', function(){
var file = this.files[0];
var xhr = XMLHttpRequest();
var formdata = new FormData(document.getElementById('form'));
formdata.append('test', 123);
formdata.append('file', file);
// 监听progress事件了 上传
xhr.upload.onprogress = function(e){
if(event.lengthComputable){
var percentComplete = e.loaded / e.total;
}
}
xhr.open('POST', 'testagain');
xhr.send(formdata);
})
其他相关事件:
- xhr.onload 传输完成
- xhr.onabort 传输被取消
- xhr.error 传输中出现错误
- xhr.onloadstart 开始传输
- xhr.onloadend 传输结束 但不知道是否成功
【JavaScript-基础-文件上传】的更多相关文章
- PHP中使用Session配合Javascript实现文件上传进度条功能
Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...
- jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文 ...
- JavaScript检测文件上传的类型与大小
$(function(){ $("#files").change(function(){ // 添加允许上传的文件类型 var exts = new Array(); exts[0 ...
- javascript实现文件上传之前的预览功能
1.首先要给上传文件表单控件和图片控件设置name属性 <div class="form-group"> <label fo ...
- 用PHP Session和Javascript实现文件上传进度条,处理进度条
参考http://www.pureweber.com/article/php-upload-progress/ php显示处理进度条http://blog.csdn.net/boabc2304/art ...
- dwz+jquery+fileupload+springmvc实现文件上传 及图片预览
1 前台jsp:文件的上传利用了iframe实现局部刷新功能.使用了apache的fileupload组件,用到的jar: commons-fileupload.jar,commons-io.jarD ...
- maven工程 java 实现文件上传 SSM ajax异步请求上传
java ssm框架实现文件上传 实现:单文件上传.多文件上传(单选和多选),并且用 ajax 异步刷新,在当前界面显示上传的文件 首先springmvc的配置文件要配置上传文件解析器: <!- ...
- 文件上传:swfupload.js、blueimp-file-upload
一.swfupload 1.下载swfupload http://code.google.com/p/swfupload/ 2. 3.API http://www.cnblogs.com/henw/ ...
- 文件上传(asp.net webform中)
1.配置允许上传文件大小 <configuration> <appSettings> <!--配置上传文件最大字节数:单位KB--> <add key=&qu ...
- 文件上传及时显示, 前端js和后端php相互结合使用
文件读取 javascript 绑定文件上传变化事件 onchange 利用window对象 FileReader 调用方法 readerAsDataURL onload 方法 异步读取 属性:fil ...
随机推荐
- sql:Mysql create view,function,procedure
create database Liber; use Liber; #顯示數据庫 20150210 Geovin Du 涂聚文 SHOW DATABASES; drop table BookKindL ...
- Bzoj4766: 文艺计算姬(Matrix-tree/prufer)
BZOJ 答案就是 \(n^{m-1}m^{n-1}\) \(prufer\) 证明: \(n\) 中的数字出现 \(m-1\) 次,\(m\) 中出现 \(n-1\) 次,根据 \(prufer\) ...
- php中怎么理解Closure的bind和bindTo
bind是bindTo的静态版本,因此只说bind吧.(还不是太了解为什么要弄出两个版本) 官方文档: 复制一个闭包,绑定指定的$this对象和类作用域. 其实后半句表述很不清楚. 我的理解: 把一个 ...
- void()表达式结果是SyntaxError
void是一元运算符,他出现在操作数之前,操作数可以使任意类型,操作数会照常计算,但忽略计算结果并返回undefined. 因此在操作数具有副作用的时候使用void来让程序根据语义 console.l ...
- svn add @2x image 文件
svn add `svn status . | grep "^?" | awk '{print $2"@"}'`
- 【问题:发现与解决】angularJs指令在dijit控件中的使用
由于公司主要用的JS框架是DOJO,最近又运用了angularJs.因此,不可能避免的遇到dojo控件和angular指令(directive)共用时遇到的一些问题,问题如下: <input ...
- Sql server 查询数据库中包含某字段的所有的表
我们有时候会需要查询数据库中包含某字段的所有的表,去进行update,这时就可以用下面的SQL来实现: select object_name(id) objName,Name as colName f ...
- MUI框架-06-静态页制作(图片轮播)
MUI框架-06-静态页制作(图片轮播) 轮播也是静态,是相对页面交互来说 上一篇介绍了如何设计一个简单的界面,还没有接触过,请先查看: MUI框架-01-介绍-创建项目-简单页面 轮播组件 之前也介 ...
- Oracle 11g 管理工具及SQL Deverloper 的使用教程
Oracle 管理工具及SQL Deverloper 的使用教程 默认的网站的管理工具 网址格式:https://机器名:1158/em 默认:https://localhost:1158/em 机器 ...
- AndroidUI多线程网络请求更新导致BUG
昨天发现一个问题,以前做好的UI列表不用正常显示了,必须,下拉一下,才能加载内容,以前是页面自动加载第一屏幕的. 这个就不好了,只是给页面加了一个按钮啊,不应该造成这么大的问题. 按钮就是设置了一个位 ...