JS中FormData類實現(xiàn)文件上傳

更新時間：2020年03月27日 17:11:29 作者：愛玲姐姐

這篇文章主要為大家詳細介紹了JS中FormData類實現(xiàn)文件上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS中FormData類實現(xiàn)文件上傳的具體代碼，供大家參考，具體內(nèi)容如下

上篇文章講到了FormReader類實現(xiàn)文件上傳，但是那是HTML5的新特性，在不支持H5的瀏覽器上則無法使用。這次介紹一個JS的普通類FormData，在不支持H5瀏覽器環(huán)境下也可以文件上傳和預覽，并且還能監(jiān)控上傳進度。

案例一：xhr.upload.onprogress監(jiān)控文件的上傳進度，并且動態(tài)顯示

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 .progress {
 width: 100px;
 height: 10px;
 background-color: #eee;
 }
 .progress-bar {
 width: 0;
 height: 10px;
 background-color: blue;
 }
 </style>
</head>
<body>
 <form action="" id="form">
 <input type="file" name="file" id="file">
 </form>
 <div class="progress">
 <div class="progress-bar" id="bar"></div>
 </div>
 <script>
 var file = document.getElementById("file");
 var bar = document.getElementById("bar");
 file.onchange = function () {
 var formData = new FormData();
 // 上傳的文件
 formData.append('attrName', this.files[0]);

 var xhr = new XMLHttpRequest();
 xhr.open("post", "/upload");
 // xhr.upload.onprogress監(jiān)聽上傳進度
 xhr.upload.onprogress = function (ev) {
 // ev.loaded表示上傳了多少，ev.total表示文件的總大小
 var result = (ev.loaded / ev.total * 100).toFixed(2) + '%';
 // result為進度百分比
 bar.style.width = result;
 bar.innerHTML = result;
 }
 xhr.send(formData);
 xhr.onload = function () {
 if(xhr.status == 200) {
  console.log(xhr.responseText);
 }
 }
 }
 </script>
</body>
</html>

案例二：服務器端返回上傳路徑，供客戶端預覽上傳的圖片效果

成功預覽我家耶啵的帥照

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 .progress {
 display: inline-block;
 width: 600px;
 height: 20px;
 border-radius: 5px;
 background-color: #eee;
 }
 .progress-bar {
 width: 0;
 height: 20px;
 background-color: orange;
 border-radius: 5px;
 font-size: 16px;
 text-align: center;
 color: #fff;
 }
 </style>
</head>
<body>
 <form action="" id="form">
 <input type="file" name="file" id="file">
 <div class="progress">
 <div class="progress-bar" id="bar"></div>
 </div>
 </form>
 
 <div id="box"></div>
 <script>
 var file = document.getElementById("file");
 var bar = document.getElementById("bar");
 var box = document.getElementById("box");
 file.onchange = function () {
 var formData = new FormData();
 // 上傳的文件
 formData.append('attrName', this.files[0]);

 var xhr = new XMLHttpRequest();
 xhr.open("post", "/upload");
 xhr.upload.onprogress = function (ev) {
 // ev.loaded表示上傳了多少，ev.total表示文件的總大小
 var result = (ev.loaded / ev.total * 100).toFixed(2) + '%';
 // result為進度百分比
 bar.style.width = result;
 bar.innerHTML = result;
 }
 xhr.send(formData);
 xhr.onload = function () {
 if(xhr.status == 200) {
  var result = JSON.parse(xhr.responseText);
  var img = document.createElement('img');
  img.src = result.path;
  // 圖片加載完成在進行顯示，否則用戶會看到圖片的加載過程，效果不好
  img.onload = function () {
  box.appendChild(img);
  }
 }
 }
 }
 </script>
</body>
</html>

nodejs服務器端的部分代碼：

app.post('/upload', (req, res) => {
 // 創(chuàng)建formidable表單解析對象
 const form = new formidable.IncomingForm();
 // 上傳文件的路徑
 form.uploadDir = path.join(__dirname, 'public', 'uploads');
 // 上傳文件的后綴名保留
 form.keepExtensions = true;
 // 解析客戶端傳遞過來的FormData對象
 form.parse(req, (err, fileds, files) => {
 // 將文件的地址扒出來以json對象的形式返回給客戶端
 res.send({
 path: files.attrName.path.split('public')[1]
 });
 })
})

更多精彩內(nèi)容請參考專題《ajax上傳技術(shù)匯總》，《javascript文件上傳操作匯總》和《jQuery上傳操作匯總》進行學習。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: