系列文章目录

提示：具体呈现内容如下图片,点击上传会出现进度条

文章目录

系列文章目录
图片展示
一、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="https://cdn.bootcdn.net/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% 得到已经上传多少的百分比,然后将数值渲染到对应的盒子

JavaScript 上传文件并显示进度条(主页资源中有后端服务器).相关推荐

JavaWeb 使用ajax上传文件并显示进度条等上传信息
文件上传在Web程序中是常用的功能,一般上传图片或者文件大小比较少的文件客户端不需要显示上传进度或文件上传的信息,如果是上传的文件比较大的时候,可以在客户端展示文件上传进度以及根据业务的需求显示文件上 ...
java 上传进度条_Ajax上传文件并显示进度条
第四步:编写前端代码. 1.路径在当前项目的:src\main\resources\asyn.html 上传进度条 align="center"> 0% bordercol ...
Ajax上传文件并显示进度条
举例说明 (主要用到$.ajax的xhr参数执行回调) xhr 用于创建 XMLHttpRequest 对象的函数. 前端框架:jQuery+Bootstrap+Layer HTML页面里的表单: & ...
使用jquery.fileupload.js上传文件时添加进度条
1.首先页面用来展示上传按钮和显示进度条的 <tr><td style="width:140px;text-align: right;padding-top: 13px ...
EXTJS+ASP.NET上传文件带实时进度条代码
一,文件夹二,upLoad.cs是继承IHttpModule的类: usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usin ...
ajax实现一个前台的进度条,前台ajax实现上传文件并且有进度条
// ajax + jQuery上传 function UploadFile() { var xhrOnProgress = function(fun) { xhrOnProgress.onprogr ...
input type='file' 上传文件时显示文件名及上传进度
https://blog.csdn.net/qq_36687640/article/details/78551217 1.input type='file' 上传文件时显示文件名及上传进度 <i ...
Android 下载文件并显示进度条
2019独角兽企业重金招聘Python工程师标准>>> OK,上一篇文章讲了上传文件到服务端,并显示进度条那么这边文章主要讲下载文件并显示进度条. 由于简单,所以只上传代码.还是需 ...
js实现图片上传预览及进度条
js实现图片上传预览及进度条原文js实现图片上传预览及进度条最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...
android下载通知栏,Android开发中实现下载文件通知栏显示进度条
android开发中实现下载文件通知栏显示进度条. 1.使用asynctask异步任务实现,调用publishprogress()方法刷新进度来实现(已优化) public class myasync ...

JavaScript 上传文件并显示进度条(主页资源中有后端服务器).

系列文章目录

文章目录

图片展示

一、HTML和CSS样式如下

二、JS代码块

1.引入jquery库

2.JavaScript代码(实现上传进度)

总结:

JavaScript 上传文件并显示进度条(主页资源中有后端服务器).相关推荐

最新文章

热门文章