ajax 上传文件与进度条上传
其实很久之前就想写这篇文章了,ajax 上传文件其实是 html5 中新加的一个属性才能做到(formData),如果上传一个比较大的文件时,我们就要做到实现一个进度条效果,需要知道到底上传了多少或者说百分之多少,这样用户体验比较好.
因为项目中用到了很多次,所以这次就来给大家分享一下我自己习惯的一套写法.写的不好请勿鄙视…哈哈
好了,废话不多说,直接上代码.
<!--首先我们先定义 Html 结构,结构很简单,就是一个 form-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax 上传与进度条效果</title>
</head>
<body>
<form action="a.php" method="post" enctype="multipart/form-data" id="form">
<input type="file" name="file" id="file">
<button id="btn">上传</button>
</form>
</body>
<script>
//为 file 控件绑定 change 事件
$id("file").addEventListener("change",function(){
console.log(this.files[0]);//这个是选中的文件 可以获取到上次修改时间, name(文件名),size(文件大小),type(文件的 mime 类型) 可以根据这个判断是否上传
});
//为按钮绑定事件
$id("btn").addEventListener("click",function(){
//这里先判断是否 file 里有内容
if(!$id("file").value){
alert("请选择文件!");
return false;
}
//这里 new 一个 formData 将 form 的 element 传进去
var formdata = new FormData($id("form"));
//formdata 会将整个 form 表单的内容整体打包(包括文字内容)
//下面就进行 ajax 提交数据了
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(this.readyState == 4){
alert(this.responseText);
}
};
//这里我们来实现一个进度条效果
xhr.upload.onprogress = function(e){
if(e.lengthComputable){
console.log(100*e.loaded/e.total);
}
};
xhr.open('post','a.php',true);
xhr.send(formdata);//在这里将 formdata 发送出去,这样 a.php 就可以接受到这个文件了,和 form 提交是一样的
});
//返回一个 element
function $id(id){
return document.getElementById(id);
}
</script>
</html>
小 A 空间 , 版权所有丨如未注明转载 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明ajax 上传文件与进度条上传！
