ajax-属性、原理、实现html5进度条上传文件
一、远古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>
ajax-属性、原理、实现html5进度条上传文件的更多相关文章
- PHP+ajaxForm异步带进度条上传文件实例
在使用ajaxForm方法之前,首先需要安装form.js的插件,网上有: 一.首先说用法,ajaxForm可以接收0或1个参数,该参数可以是一个变量.一个对象或回调函数,这个对象主要有以下参数: v ...
- ajax利用html5新特性带进度条上传文件
http://blog.csdn.net/pkgray/article/details/27591283 http://www.matlus.com/html5-file-upload-with-pr ...
- ajaxfileupload原理及用法，主要用于即想用ajax序列化传递参数，又必须上传文件
一,原理 AjaxFileUpload.js并不是一个很出名的插件,只是别人写好的放出来供大家用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 当初做了个异步上传的功能,选择它因 ...
- 对Ajax连接的认识~为毛不能上传文件！！！
最近做毕设的时候需要用到上传图片的功能,但是我的毕设全部的传输都是基于ajax的请求,百度了一圈发现TMD居然说ajax不能上传文件!!当时我就不乐意了啊,那难道其他人都用的是黑科技吗?!又来网上的大 ...
- ajax ＋jsp＋iframe无刷新上传文件[转]
http://hi.baidu.com/zj360202/blog/item/f23e3711f929c774cb80c475.html ajax jsp 无刷新上传文件 2009-10-26 16: ...
- AJAX-----15HTML5实现进度条上传
目的当然还是为了提高用户的体验度嘛,, 废话不多说走码.... <!DOCTYPE html> <html lang="en"> <head> ...
- 通过Ajax提交form表单来提交上传文件
Ajax 提交form方式可以将form表单序列化 然后将数据通过data提交至后台,例如: $.ajax({ url : "http://localhost:8080/" ...
- html5 拖拽上传文件时，屏蔽浏览器默认打开文件
参考: https://www.cnblogs.com/kingsm/p/9849339.html
- Android上传图片到PHP服务器并且支持浏览器上传文件（word、图片、音乐等）
暑假已经过了一半了,这才完成计划当中的第二个任务.虽然进度是慢了点.但也算是暑假的收获吧.下面我就把我学习当中的收获记录在此. 还是跟以往一样,先上图片. 操作的步骤:打开程序---->选择上传 ...
随机推荐
- Android之SimpleAdapter简单实例和SimpleAdapter参数说明
SimpleAdapter基本上认知了其参数含义 用起来就简单多了 SimpleAdapter的参数说明 第一个参数 表示访问整个android应用程序接口,基本上所有的组件都需要 第二个参数表示生 ...
- 牛客练习赛52 C 烹饪(容斥+扩展欧几里得)
来源:https://ac.nowcoder.com/acm/contest/1084/D 思路来源:https://www.cnblogs.com/Morning-Glory/p/11521114. ...
- 基于 Google-S2 的地理相册服务实现及应用
马蜂窝技术原创内容,更多干货请关注公众号:mfwtech 随着智能手机存储容量的增大,以及相册备份技术的普及,我们可以随时随地用手机影像记录生活,在手机中存储几千张甚至上万张照片已经是很常见的事情.但 ...
- Go语言实现：【剑指offer】字符流中第一个不重复的字符
该题目来源于牛客网<剑指offer>专题. 请实现一个函数用来找出字符流中第一个只出现一次的字符.例如,当从字符流中只读出前两个字符"go"时,第一个只出现一次的字符是 ...
- 性能优化-CPU占用过高问题排查
1. 性能优化是什么? 1.1 性能优化就是发挥机器本来的性能 1.2 性能瓶颈在哪里,木桶效应. CPU占用过高 1.现象重现 CPU占用过高一般情况是代码中出现了循环调用,最容易出现的情况有几 ...
- 数据算法 --hadoop/spark数据处理技巧 --（7.共同好友 8. 使用MR实现推荐引擎）
七,共同好友. 在所有用户对中找出“共同好友”. eg: a b,c,d,g b a,c,d,e map()-> <a,b>,<b,c,d,g> ;< ...
- 设置允许外网访问MySQL
1:设置mysql的配置文件 /etc/mysql/my.cnf 找到 bind-address =127.0.0.1 将其注释掉://作用是使得不再只允许本地访问: 重启my ...
- H5异步加载多图
异步加载多图(可能没啥用,加载慢)(图片预加载,提前给浏览器缓存图片) 1. 用一个计数变量记录需要加载的图片个数 2. 用new Image()去加载,加载完给此对象的src赋值要加载的url路径( ...
- light oj 1045 - Digits of Factorial K进制下N！的位数
1045 - Digits of Factorial Factorial of an integer is defined by the following function f(0) = 1 f(n ...
- 【Java编程思想读书笔记】继承中父类的初始化方式
继承中父类的初始化方式 p144页有感 一.提出问题 假设有一些类,这些类有继承关系的时候,当初始化一个子类对象,对于该类的父类而言,发生了什么呢?是仅仅只是复制了一个引用还是也会同时new一个父类对 ...