ajax-属性、原理、实现html5进度条上传文件
2024-08-31 11:14:19
一、远古ajax实现方式如下:
1、前端请求后台,后台设置返回 http状态码204
2、运用img图片(或css/javascript等)的加载机制,请求后台
3、post提交数据,运用iframe标签,能post提交,且页面不刷新
二、现代ajax(运用XMLHttpRequest):
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
//创建http请求
function createHttp(){
var xml = null;
if(window.XMLHttpRequest){
xml = new XMLHttpRequest(); //现在主流浏览器,包括IE7和以上版本
}else if(window.ActiveXObject){
xml = new ActiceXObject('Microsoft.XMLHTTP'); //兼容IE6的浏览器
}
return xml;
} //构造发送请求
function httpStart(){
var xml = createHttp(); //创建http对象
xml.open('GET','./2020-02-22.php',true); //第一个参数:设置请求方式, 第二个参数:设设置请求 第三个参数:设置同步还是异步
xml.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8'); //设置为post请求, 必须在open() 之后、send() 之前调用setRequestHeader
xml.send(null); //设置请求发送的数据,数据的格式:像get传参 key1=value1&key2=value2
xml.onreadystatechange = function(){ //请求的状态每次变化都会触发这个函数
var state = this.readyState; //请求的状态值0-1-2-3-4 5个代表值,其中4代表成功
if(state == 4){
console.log('请求状态码:'+state)
var text = this.responseText; //获取返回的主体信息
console.log('返回主体:'+text)
var response = this.response;
console.log('返回信息:'+response)
var responseType = this.responseType;
console.log('返回数据类型:'+responseType)
var status = this.status;
console.log('返回的状态码:'+status)
var statusText = this.statusText;
console.log('返回的状态信息:'+statusText)
var responseXML = this.responseXML;
console.log('返回的xml信息:'+responseXML) //返回xml类型对象
var getResponseHeader = this.getResponseHeader('Content-length'); //http返回的属性名
console.log('返回请求的数据长度:'+getResponseHeader)
var getAllResponseHeaders = this.getAllResponseHeaders();
console.log('返回请求的全部信息:'+getAllResponseHeaders)
}
}
}
</script>
</head>
<body>
<button onclick="httpStart()">点击我</button>
</body>
</html>
三、HTML5简单带进度条的文件上传
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script type="text/javascript">
function selfile(){
var div2 = document.getElementById('div2');
var file = document.getElementById('file').files[0];//html5新属性,获取上传文件对象
var fm = new FormData(); //html5新属性,创建表单对象
fm.append('file',file);
var xml = new XMLHttpRequest(); //创建请求
xml.open('POST','dfadf.php',true);
xml.upload.onprogress = function (ev){//绑定上传的文件的监听事件
if(ev.lengthComputable){//开始上传的标志
var progress = 100*ev.loaded/ev.total;//上传文件的大小/文件总大小
div2.style.width = progress + '%';
div2.innerHTML = parseInt(progress) + '%';
}
}
xml.send(fm);
}
</script>
<style type="text/css">
#div1{
width:500px;
height:30px;
border: 1px solid green;
}
#div2{
width: 0%;
height:100%;
background: green;
}
</style>
</head>
<body>
<h1>html5进度条文件上传</h1>
<div id="div1">
<div id="div2"></div>
</div>
<input id="file" type="file" name="点击上传" onchange="selfile();" >
</body>
</html>
最新文章
- 排名前 8 的 PHP 调试工具
- JAVA获取客户端IP地址
- myeclipse中配置maven
- 阅读《LEARNING HARD C#学习笔记》知识点总结与摘要三
- Makefile的学习笔记
- 2015多校.MZL&#39;s endless loop(欧拉回路的机智应用 || 构造)
- 基于TBDS的flume异常问题排查过程
- IE9 以下版本浏览器兼容HTML5的方法,使用百度静态资源的html5shiv包
- s标签可以if elseif else
- JDK动态代理实现简单AOP--转
- angularjs:[1] ui-router 权限控制
- ArcGIS对SLD样式的支持
- jpg、png格式的图片转换成webp后颜色失真的问题
- ERP渠道文档详细和修改(二十五)
- [转] 使用moment.js轻松管理日期和时间
- luogu [TJOI2007]线段
- [android] 手机卫士来电显示号码归属地
- 第二章 eclipse中m2e插件问题
- linux中gdb的可视化调试
- flex tooltip css