ajax文件上传进度条实现

最新推荐文章于 2022-10-27 14:47:48 发布

时光浅止

最新推荐文章于 2022-10-27 14:47:48 发布

阅读量1.5k

点赞数 2

文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/weixin_45086164/article/details/126641685

版权

使用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 装载file
            const 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>