系列文章目录
提示：具体呈现内容如下图片,点击上传会出现进度条
文章目录
系列文章目录图片展示一、HTML和CSS样式如下二、JS代码块1.引入jquery库2.JavaScript代码(实现上传进度)总结:图片展示
提示：以下是本篇文章正文内容，下面案例可供参考
一、HTML和CSS样式如下
HTML代码块
<body><input type="file" name="uoload" id="uoload"><div class="progress"><div></div></div><!-- 按钮 --><button id="d1">上传</button><!-- 展示区域 --><div id="show"></div></body>
css代码块
<style>.progress {width: 300px;border: 1px solid black;border-radius: 10px;height: 10px;margin: 10px 0px;overflow: hidden;}.progress>div {width: 0;height: 100%;background-color: blue;transition: all 1s;}#show {width: 300px;height: 300px;border: 1px solid red;background-repeat: no-repeat;background-size: contain;}</style>
二、JS代码块
1.引入jquery库
<script src="/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
2.JavaScript代码(实现上传进度)
JavaScript代码如下:
$(function() {$('#d1').on('click', function() {//获取上传文件var file = $('#uoload')[0].files[0];//创建文件上传格式对象var formData = new FormData();formData.append('fileInfo', file);//网络请求$.ajax({type: 'POST',url: 'http://192.168.205.93:3000/myload',data: formData,//设置文件上传格式processData: false,contentType: false,//添加自定义属性,监听上下文的进度xhr: function() {//创建原生的ajax请求对象var xhr = new XMLHttpRequest();//监听进度的一个事件xhr.upload.onprogress = function(e) {console.log(e.total); //文件大小console.log(e.loaded); //上传多少var w = (e.loaded / e.total) * 100 + '%'$('.progress > div').css({width: w})}return xhr},//获取数据success: (res) => {console.log(res);$('#show').css({backgroundImage: `url(./serve/app/upload/${res.path})`,});}})});})
总结:
js代码的逻辑如下: 1.上传的内容是文件 --------------------------- FormData / 表单提交2.怎么实现进度条的百分比 ------------------------ 这时候用到了原生XMLHttpRequest()中的api3.监听上传文件大小api ---------------------------- XMLHttpRequest() 中的 upload().onprogress=function(e) e.total和e.loaded两个属性 前者表示:文件的总大小,后者表示已经上传的文件大小通过 var 百分比 =( e.loaded/ e.total) *100% 得到已经上传多少的百分比,然后将数值渲染到对应的盒子
