ajax文件上传进度条实现

使用ajax步骤
1.创建xhr对象
let xhr=new XMLHttpRequest();
2.绑定监听事件
xhr.onreadystatechange=function(){
if(xhr.readyState4 && xhr.status200){
//接收响应
let result=xhr.responseText;
}
}
3.打开链接，创建请求
xhr.open(method,url,true)
method 必须是字符串 ‘get’ ‘post’
url='http://127.0.0.1:3000/list
4.xhr.send()

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body><input type="file" id="file" /><!-- 进度条 --><progress id="progress" value="0" max="100"></progress><script type="text/javascript">//获取input file 的dom对象const inputFile=document.querySelector("#file");//监听change事件inputFile.addEventListener('change',function(){var file=inputFile.files[0]console.log(file)console.log(file.name)//文件名称console.log(getFileSize(file.size))//文件大小console.log(checkFileExt(file.name))//文件名是否合法//使用formData 装载fileconst formData=new FormData();formData.append('file',this.files[0]);//上传文件upload(formData);})//文件大小单位换算function getFileSize(fileByte) {var fileSizeByte = fileByte;var fileSizeMsg = "";if (fileSizeByte < 1048576) fileSizeMsg = (fileSizeByte / 1024).toFixed(2) + "KB";else if (fileSizeByte == 1048576) fileSizeMsg = "1MB";else if (fileSizeByte > 1048576 && fileSizeByte < 1073741824) fileSizeMsg = (fileSizeByte / (1024 * 1024)).toFixed(2) + "MB";else if (fileSizeByte > 1048576 && fileSizeByte == 1073741824) fileSizeMsg = "1GB";else if (fileSizeByte > 1073741824 && fileSizeByte < 1099511627776) fileSizeMsg = (fileSizeByte / (1024 * 1024 * 1024)).toFixed(2) + "GB";else fileSizeMsg = "文件超过1TB";return fileSizeMsg;}//字符）检查文件上传表单控件，如果含有[jpg,jpeg,gif,png]则显示“文件类型合法”，否则“显示文件类型错误”function checkFileExt(filename){var flag = false; //状态var arr = ["jpg","png","gif"];//取出上传文件的扩展名var index = filename.lastIndexOf(".");var ext = filename.substr(index+1);//循环比较for(var i=0;i<arr.length;i++){if(ext == arr[i]) {flag = true; //一旦找到合适的，立即退出循环break;}}//条件判断if(flag) {return true}else {return false}}//这里注意一下：前端监听文件进度不需要后端有什么特殊处理，后端仅仅是做了文件流的写入而已。//原生请求// const upload=(formData)=>{//  const xhr=new XMLHttpRequest();//  //监听文件上传进度//  xhr.upload.addEventListener('progress',function(e){//      if(e.lengthComputable){//          //获取进度//          const progress=Math.round((e.loaded*100)/e.total);//          console.log(progress) //获取进度条//          document.querySelector("#progress").setAttribute('value',progress);//      }//  },false);//  //监听上传完成事件//  xhr.addEventListener('load',()=>{//      console.log('上传完成')//  },false);//  xhr.open('post','http://127.0.0.1:3003/upload1');//  xhr.send(formData);// }//使用jquery的ajax上传const upload=(formData)=>{$.ajax({type:'post',url:'http://127.0.0.1:3003/upload1',data:formData,//不进行数据处理和内容处理processData:false,contentType:false,//监听 xhr xhr:function(){const xhr=$.ajaxSettings.xhr();if(xhr.upload){xhr.upload.addEventListener('progress',e=>{const {loaded,total} =e;var progress=Math.round((loaded*100)/total);console.log(progress) //获取进度条document.querySelector('#progress').setAttribute('value',progress);},false);return xhr;}   },success:function(response){console.log('上传成功');}})}//使用 axios 上传并监听进度// const upload=async(formData)=>{//  let config={//      //注意要把 contentType 设置为multipart/form-data//      headers:{//          'Content-Type':'multipart/form-data'//      },//      //监听 onUploadProgress 事件//      onUploadProgress:e =>{//          const {loaded,total} =e;//          //使用本地 progress 事件//          if(e.lengthComputable){//              let progress=Math.round((loaded*100)/total);//              document.querySelector('#progress').setAttribute('value',progress);//          }//      }//  };//  const {status} =await axios.post('http://127.0.0.1:3003/upload1',formData,config);//  if(res.status===200){//      console.log('上传完成');//  }// }</script>
</body>
</html>

ajax文件上传进度条实现相关推荐

html如何显示上传进度条,HTML5 Ajax文件上传进度条如何显示
这篇文章主要介绍了HTML5 Ajax文件上传进度条是如何显示的,基于原生html5实现,不需要falsh支持,进度可以自定义显示,控制灵活,对HTML5上传进度条感兴趣的小伙伴们可以参考一下原本打 ...
大文件上传进度条显示（仿CSDN资源上传效果） .
浏览-选择文件-点击 "上传 "后,效果如下: 弹出透明UI遮罩层并显示上传这个过程我这里设置太透明了效果不是很立体文件结构如图: 说明:用到"高山来客" ...
html资源文件记载进度条,HTML5矢量实现文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
大文件上传进度条显示（仿CSDN资源上传效果）
浏览-选择文件-点击 "上传 "后,效果如下: 弹出透明UI遮罩层并显示上传这个过程我这里设置太透明了效果不是很立体文件结构如图: 说明:用到"高山来客" ...
HTML5矢量实现文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
PHP + ajax 实现上传进度条、PHP 上传大视频
一.PHP + ajax 实现上传进度条 1.1 CSS 样式根据自身调整哦! .processBar{display: inline-block;width: 0;height: 7px;left ...
jquery和php上传文件进度条,jQuery实现文件上传进度条特效_jquery
上传进度条通常是由前面jquery加后端了脚本器脚本来实现了,今天我们介绍的是一款基本php+jQuery实现文件上传进度条效果的例子,具体细节如下. 最近呢,一个项目做一个进度条的效果出来,这个之前 ...
django文件——django + jquery-file-upload上传篇（二）-- 插件实现文件上传+进度条显示 +拖入文件上传...
django + jquery-file-upload 插件实现文件上传+进度条显示 1.model.py class Fujian(models.Model):name = models.CharF ...
js实现文件上传进度条功能
开发中可能会涉及到需要展示文件上传进度条显示,方便用户知道文件的上传状态.其实进度条展示只需要拿到文件已上传的大小,和被上传文件的总大小即可.废话不多说直接上代码!! class fileUpload ...
php大文件上传插件,PHP 大文件上传进度条实现
目前我知道的方法有两种,一种是使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc),另外一种方法是使用PECL扩 ...

ajax文件上传进度条实现

ajax文件上传进度条实现相关推荐

最新文章

热门文章