當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
JavaScript 上传文件并显示进度条(主页资源中有后端服务器).
生活随笔
收集整理的這篇文章主要介紹了
JavaScript 上传文件并显示进度条(主页资源中有后端服务器).
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
系列文章目錄
提示：具體呈現(xiàn)內(nèi)容如下圖片,點(diǎn)擊上傳會(huì)出現(xiàn)進(jìn)度條
文章目錄
- 系列文章目錄
- 圖片展示
- 一、HTML和CSS樣式如下
- 二、JS代碼塊
- 1.引入jquery庫(kù)
- 2.JavaScript代碼(實(shí)現(xiàn)上傳進(jìn)度)
- 總結(jié):
圖片展示
提示：以下是本篇文章正文內(nèi)容，下面案例可供參考
一、HTML和CSS樣式如下
HTML代碼塊
<body><input type="file" name="uoload" id="uoload"><div class="progress"><div></div></div><!-- 按鈕 --><button id="d1">上傳</button><!-- 展示區(qū)域 --><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庫(kù)
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>2.JavaScript代碼(實(shí)現(xiàn)上傳進(jìn)度)
JavaScript代碼如下:
$(function() {$('#d1').on('click', function() {//獲取上傳文件var file = $('#uoload')[0].files[0];//創(chuàng)建文件上傳格式對(duì)象var formData = new FormData();formData.append('fileInfo', file);//網(wǎng)絡(luò)請(qǐng)求$.ajax({type: 'POST',url: 'http://192.168.205.93:3000/myload',data: formData,//設(shè)置文件上傳格式processData: false,contentType: false,//添加自定義屬性,監(jiān)聽(tīng)上下文的進(jìn)度xhr: function() {//創(chuàng)建原生的ajax請(qǐng)求對(duì)象var xhr = new XMLHttpRequest();//監(jiān)聽(tīng)進(jìn)度的一個(gè)事件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},//獲取數(shù)據(jù)success: (res) => {console.log(res);$('#show').css({backgroundImage: `url(./serve/app/upload/${res.path})`,});}})});})總結(jié):
js代碼的邏輯如下: 1.上傳的內(nèi)容是文件 --------------------------- FormData / 表單提交2.怎么實(shí)現(xiàn)進(jìn)度條的百分比 ------------------------ 這時(shí)候用到了原生XMLHttpRequest()中的api3.監(jiān)聽(tīng)上傳文件大小api ---------------------------- XMLHttpRequest() 中的 upload().onprogress=function(e) e.total和e.loaded兩個(gè)屬性 前者表示:文件的總大小,后者表示已經(jīng)上傳的文件大小通過(guò) var 百分比 =( e.loaded/ e.total) *100% 得到已經(jīng)上傳多少的百分比,然后將數(shù)值渲染到對(duì)應(yīng)的盒子總結(jié)
以上是生活随笔為你收集整理的JavaScript 上传文件并显示进度条(主页资源中有后端服务器).的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 计算机印屏幕功能无法使用,计算机电脑管家
- 下一篇： JavaScript如何进行文件上传