10個對web開發人員有用的HTML文件上傳技巧

本文已經過原作者 Tapas Adhikary 授權翻譯

簡介

上傳文件功能可以說是項目經常出現的需求。從在社交媒體上上傳照片到在求職網站上發布簡歷，文件上傳無處不在。在本文中，我們將討論 HTML文件上傳支持的10種用法，希望對你有用。

1. 單文件上傳

我們可以將input 類型指定為file，以在Web應用程序中使用文件上傳功能。

<input type="file" id="file-uploader">

input filte 提供按鈕上傳一個或多個文件。默認情況下，它使用操作系統的本機文件瀏覽器上傳單個文件。成功上傳后，File API 使得可以使用簡單的 JS 代碼讀取File對象。要讀取File對象，我們需要監聽 change事件。

首先，通過id獲取文件上傳的實例:

const fileUploader = document.getElementById('file-uploader');

然后添加一個change 事件偵聽器，以在上傳完成后讀取文件對象，我們從event.target.files屬性獲取上傳的文件信息：

fileUploader.addEventListener('change', (event) => {
  const files = event.target.files;
  console.log('files', files);
});

在控制臺中觀察輸出結果，這里關注一下FileList數組和File對象，該對象具有有關上傳文件的所有元數據信息。

如果大家看到這里，有點激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/rNLOyRm

2. 多文件上傳

如果我們想上傳多個文件，需要在標簽上添加 multiple 屬性：

<input type="file" id="file-uploader" multiple />

現在，我們可以上傳多個文件了，以前面事例為基礎，選擇多個文件上傳后，觀察一下控制臺的變化：

如果大家看到這里，有點激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/MWeamYp

3.了解文件元數據

每當我們上傳文件時，File對象都有元數據信息，例如file name，size，last update time，type 等等。這些信息對于進一步的驗證和特殊處理很有用。

const fileUploader = document.getElementById('file-uploader');

// 聽更 change 件并讀取元數據
fileUploader.addEventListener('change', (event) => {
  // 獲取文件列表數組
  const files = event.target.files;

  // 遍歷并獲取元數據
  for (const file of files) {
    const name = file.name;
    const type = file.type ? file.type: 'NA';
    const size = file.size;
    const lastModified = file.lastModified;
    console.log({ file, name, type, size, lastModified });
  }
});

下面是單個文件上傳的輸出結果：

如果大家看到這里，有點激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/gOMaRJv

4.了解 accept 屬性

我們可以使用accept屬性來限制要上載的文件的類型，如果只想上傳的文件格式是 .jpg，.png 時，可以這么做：

<input type="file" id="file-uploader" accept=".jpg, .png" multiple>

在上面的代碼中，只能選擇后綴是.jpg和.png的文件。

如果大家看到這里，有點激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/OJXymRP

5. 管理文件內容

成功上傳文件后顯示文件內容，站在用戶的角度上，如果上傳之后，沒有一個預覽的，就很奇怪也不體貼。

我們可以使用FileReader對象將文件轉換為二進制字符串。然后添加load 事件偵聽器，以在成功上傳文件時獲取二進制字符串。

// FileReader 實例
const reader = new FileReader();

fileUploader.addEventListener('change', (event) => {
  const files = event.target.files;
  const file = files[0];

  reader.readAsDataURL(file);

  reader.addEventListener('load', (event) => {
    const img = document.createElement('img');
    imageGrid.appendChild(img);
    img.src = event.target.result;
    img.alt = file.name;
  });
});

如果大家看到這里，有點激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/zYBvdjZ

6.驗證文件大小

如果用戶上傳圖片過大，為了不讓服務器有壓力，我們需要限制圖片的大小，下面是允許用戶上傳小于 1M 的圖片，如果大于 1M 將上傳失敗。

fileUploader.addEventListener('change', (event) => {
  // Read the file size
  const file = event.target.files[0];
  const size = file.size;

  let msg = '';

 // 檢查文件大小是否大于1MB
  if (size > 1024 * 1024) {
      msg = `<span style="color:red;">The allowed file size is 1MB. The file you are trying to upload is of ${returnFileSize(size)}</span>`;
  } else {
      msg = `<span style="color:green;"> A ${returnFileSize(size)} file has been uploaded successfully. </span>`;
  }
  feedback.innerHTML = msg;
});

如果大家看到這里，有點激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/pobjMKv

7. 顯示文件上傳進度

更好的用戶體驗是讓用戶知道文件上傳進度，前面我們用過了FileReader以及讀取和加載文件的事件。

const reader = new FileReader();

FileReader還有一個progress 事件，表示當前上傳進度，配合HTML5的progress標簽，我們來模擬一下文件的上傳進度。

reader.addEventListener('progress', (event) => {
  if (event.loaded && event.total) {
    // 計算完成百分比
    const percent = (event.loaded / event.total) * 100;
    // 將值綁定到 `progress`標簽
    progress.value = percent;
  }
});

如果大家看到這里，有點激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/eYzpwYj

8. 怎么上傳目錄上傳?

我們可以上傳整個目錄嗎?嗯，這是可能的，但有一些限制。有一個叫做webkitdirectory的非標準屬性(目前只有谷歌瀏覽器還有Microsoft Edge支持按照文件夾進行上傳)，它允許我們上傳整個目錄。

目前只有谷歌瀏覽器還有Microsoft Edge支持按照文件夾進行上傳，具體可以看下百度云盤的網頁版的上傳按鈕，在火狐下就支持按照文件進行上傳，而在谷歌和Edge下，就會給用戶提供一個下拉，讓用戶選擇是根據文件進行上傳還是根據文件夾進行上傳。

<input type="file" id="file-uploader" webkitdirectory />

用戶必須需要確認才能上傳目錄

用戶單擊“上傳”按鈕后，就會進行上傳。這里要注意的重要一點。FileList數組將以平面結構的形式包含有關上載目錄中所有文件的信息。對于每個File對象，webkitRelativePath屬性表示目錄路徑。

例如，上傳一個主目錄及其下的其他文件夾和文件：

現在，File 對象將將webkitRelativePath填充為：

如果大家看到這里，有點激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/dyXYRKp

9. 拖拽上傳

不支持文件上傳的拖拽就有點 low 了，不是嗎?我們來看看如何通過幾個簡單的步驟實現這一點。

首先，創建一個拖放區域和一個可選的區域來顯示上傳的文件內容。

<div id="container">
  <h1>Drag & Drop an Image</h1>
  <div id="drop-zone">
    DROP HERE
  </div>

  <div id="content">
    Your image to appear here..
  </div>

</div>

通過它們各自的ID獲取dropzone和content 區域。

 const dropZone = document.getElementById('drop-zone');
 const content = document.getElementById('content');

添加一個dragover 事件處理程序，以顯示將要復制的內容的效果:

dropZone.addEventListener('dragover', event => {
  event.stopPropagation();
  event.preventDefault();
  event.dataTransfer.dropEffect = 'copy';
});

接下來，我們需要一個drop事件監聽器來處理。

dropZone.addEventListener('drop', event => {
  // Get the files
  const files = event.dataTransfer.files;


});

如果大家看到這里，有點激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/ExyVoXN

10. 使用objectURL處理文件

有一個特殊的方法叫做URL.createobjecturl()，用于從文件中創建唯一的URL。還可以使用URL.revokeObjectURL()方法來釋放它。

URL.revokeObjectURL() 靜態方法用來釋放一個之前已經存在的、通過調用 URL.createObjectURL() 創建的 URL 對象。當你結束使用某個 URL 對象之后，應該通過調用這個方法來讓瀏覽器知道不用在內存中繼續保留對這個文件的引用了。


fileUploader.addEventListener('change', (event) => {
  const files = event.target.files;
  const file = files[0];
  
  const img = document.createElement('img');
  imageGrid.appendChild(img);
  img.src = URL.createObjectURL(file);
  img.alt = file.name;
});

如果大家看到這里，有點激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/BazzaoN

總結

無論何時，如果你還想學習本文涉及的一些知識，你可以在這里嘗試。

https://html-file-upload.netlify.app/

果要做一個網站應用，不可避免的會遇到表單的提交及獲取參數的值，下面我們來看看用node.js + express怎么做

先來構建一個表單簡單模擬登錄GET方式提交數據

1.打開subform.ejs文件，修改文件代碼為如下：

      <%= title %>                   <% include nav %>                      用戶名：          密碼：

2.打開subform.js我們試著接收參數值并輸出到控制臺

var express = require('express');var router = express.Router();router.get('/', function(req, res) {  var   userName = req.query.txtUserName,  userPwd = req.query.txtUserPwd,  userName2 = req.param('txtUserName'),  userPwd2 = req.param('txtUserPwd');  console.log('req.query用戶名:'+userName);  console.log('req.query密碼:'+userPwd);  console.log('req.param用戶名:'+userName2);  console.log('req.param密碼:'+userPwd2);  res.render('subform', { title: '提交表單及接收參數示例' });});module.exports = router;subform.js get方式源碼

3.運行，并提交表單在瀏覽器中運行：http://localhost:3000/subform，輸入表單項并提交，可以發現url發生了變化

我們再看看控制臺的輸出

我們完成了GET方式提交表單并接收到了值，不錯_!（稍后在后面再去講得到值的方式和區別）

再來在上面的代碼基礎上去修改一下表單的method簡單模擬登錄POST方式提交數據

1.首先修改一下subform.ejs文件中的form標簽，修改為如下：

...

2.再在subform.js中添加代碼，接收post提交、接收參數并輸出到控制臺

...router.post('/',function(req, res){  var   userName = req.body.txtUserName,  userPwd = req.body.txtUserPwd,  userName2 = req.param('txtUserName'),  userPwd2 = req.param('txtUserPwd');  console.log('req.body用戶名:'+userName);  console.log('req.body密碼:'+userPwd);  console.log('req.param用戶名:'+userName2);  console.log('req.param密碼:'+userPwd2);　res.render('subform', { title: '提交表單及接收參數示例' });});...

3.運行，并提交表單在瀏覽器中運行：http://localhost:3000/subform，輸入表單項并提交，可以發現url不會發生變化

我們再看看控制臺的輸出

再回過頭看看GET和POST方式接收值，從直接效果上來看

req.query：我用來接收GET方式提交參數

req.body：我用來接收POST提交的參數

req.params：兩種都能接收到大家自行看看Express的Request部分的API:http://expressjs.com/en/api.html#req.params

這里著重解釋一下req.body，Express處理這個post請求是通過中間件bodyParser，你可以看到app.js中有一塊代碼

...var bodyParser = require('body-parser');...app.use(bodyParser.json());app.use(bodyParser.urlencoded());...

沒有這個中間件Express就不知道怎么處理這個請求，通過bodyParser中間件分析 application/x-www-form-urlencoded和application/json請求，并把變量存入req.body，這種我們才能夠獲取到！

在前面

今年國慶假期終于可以憋在家里了不用出門了，不用出去看后腦了，真的是一種享受。這么好的光陰怎么浪費，睡覺、吃飯、打豆豆這怎么可能（耍多了也煩），完全不符合我們程序員的作風，趕緊起來把文章寫完。

這篇文章比較基礎，在國慶期間的業余時間寫的，這幾天又完善了下，力求把更多的前端所涉及到的關于文件上傳的各種場景和應用都涵蓋了,若有疏漏和問題還請留言斧正和補充。

自測讀不讀

以下是本文所涉及到的知識點，break or continue ?

文件上傳原理
最原始的文件上傳
使用 koa2 作為服務端寫一個文件上傳接口
單文件上傳和上傳進度
多文件上傳和上傳進度
拖拽上傳
剪貼板上傳
大文件上傳之分片上傳
大文件上傳之斷點續傳
node 端文件上傳

原理概述

原理很簡單，就是根據 http 協議的規范和定義，完成請求消息體的封裝和消息體的解析，然后將二進制內容保存到文件。

我們都知道如果要上傳一個文件，需要把 form 標簽的enctype設置為multipart/form-data,同時method必須為post方法。

那么multipart/form-data表示什么呢？

multipart互聯網上的混合資源，就是資源由多種元素組成，form-data表示可以使用HTML Forms 和 POST 方法上傳文件，具體的定義可以參考RFC 7578。

multipart/form-data 結構

看下 http 請求的消息體

請求頭：

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryDCntfiXcSkPhS4PN 表示本次請求要上傳文件，其中boundary表示分隔符，如果要上傳多個表單項，就要使用boundary分割，每個表單項由———XXX開始，以———XXX結尾。

消息體- Form Data 部分

每一個表單項又由Content-Type和Content-Disposition組成。

Content-Disposition: form-data 為固定值，表示一個表單元素，name 表示表單元素的名稱，回車換行后面就是name的值，如果是上傳文件就是文件的二進制內容。

Content-Type：表示當前的內容的 MIME 類型，是圖片還是文本還是二進制數據。

解析

客戶端發送請求到服務器后，服務器會收到請求的消息體，然后對消息體進行解析，解析出哪是普通表單哪些是附件。

可能大家馬上能想到通過正則或者字符串處理分割出內容，不過這樣是行不通的，二進制buffer轉化為string,對字符串進行截取后，其索引和字符串是不一致的，所以結果就不會正確，除非上傳的就是字符串。

不過一般情況下不需要自行解析，目前已經有很成熟的三方庫可以使用。

至于如何解析，這個也會占用很大篇幅，后面的文章在詳細說。

最原始的文件上傳

使用 form 表單上傳文件

在 ie時代，如果實現一個無刷新的文件上傳那可是費老勁了，大部分都是用 iframe 來實現局部刷新或者使用 flash 插件來搞定，在那個時代 ie 就是最好用的瀏覽器（別無選擇）。

DEMO

這種方式上傳文件，不需要 js ，而且沒有兼容問題，所有瀏覽器都支持，就是體驗很差，導致頁面刷新，頁面其他數據丟失。

HTML

 <form method="post" action="http://localhost:8100" enctype="multipart/form-data">

        選擇文件:
            <input type="file" name="f1"/> input 必須設置 name 屬性，否則數據無法發送<br/>
<br/>
            標題：<input type="text" name="title"/><br/><br/><br/>

        <button type="submit" id="btn-0">上 傳</button>

</form>

復制代碼

文件上傳接口

服務端文件的保存基于現有的庫koa-body結合 koa2實現服務端文件的保存和數據的返回。

在項目開發中，文件上傳本身和業務無關，代碼基本上都可通用。

在這里我們使用koa-body庫來實現解析和文件的保存。

koa-body 會自動保存文件到系統臨時目錄下，也可以指定保存的文件路徑。

然后在后續中間件內得到已保存的文件的信息，再做二次處理。

ctx.request.files.f1 得到文件信息，f1為input file 標簽的 name
獲得文件的擴展名，重命名文件

NODE

/**
 * 服務入口
 */
var http = require('http');
var koaStatic = require('koa-static');
var path = require('path');
var koaBody = require('koa-body');//文件保存庫
var fs = require('fs');
var Koa = require('koa2');

var app = new Koa();
var port = process.env.PORT || '8100';

var uploadHost= `http://localhost:${port}/uploads/`;

app.use(koaBody({
    formidable: {
        //設置文件的默認保存目錄，不設置則保存在系統臨時目錄下  os
        uploadDir: path.resolve(__dirname, '../static/uploads')
    },
    multipart: true // 開啟文件上傳，默認是關閉
}));

//開啟靜態文件訪問
app.use(koaStatic(
    path.resolve(__dirname, '../static') 
));

//文件二次處理，修改名稱
app.use((ctx) => {
    var file = ctx.request.files.f1;//得道文件對象
    var path = file.path;
    var fname = file.name;//原文件名稱
    var nextPath = path+fname;
    if(file.size>0 && path){
        //得到擴展名
        var extArr = fname.split('.');
        var ext = extArr[extArr.length-1];
        var nextPath = path+'.'+ext;
        //重命名文件
        fs.renameSync(path, nextPath);
    }
    //以 json 形式輸出上傳文件地址
    ctx.body = `{
        "fileUrl":"${uploadHost}${nextPath.slice(nextPath.lastIndexOf('/')+1)}"
    }`;
});

/**
 * http server
 */
var server = http.createServer(app.callback());
server.listen(port);
console.log('demo1 server start ......   ');
復制代碼

CODE

https://github.com/Bigerfe/fe-learn-code/

在線咨詢

上一篇：vscode極速html開發插件emmet使用-節點 #vscode插件
下一篇：如何用JavaScript實現數組分頁？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商