10個(gè)對(duì)web開發(fā)人員有用的HTML文件上傳技巧

本文已經(jīng)過原作者 Tapas Adhikary 授權(quán)翻譯

簡(jiǎn)介

上傳文件功能可以說是項(xiàng)目經(jīng)常出現(xiàn)的需求。從在社交媒體上上傳照片到在求職網(wǎng)站上發(fā)布簡(jiǎn)歷，文件上傳無處不在。在本文中，我們將討論 HTML文件上傳支持的10種用法，希望對(duì)你有用。

1. 單文件上傳

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

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

input filte 提供按鈕上傳一個(gè)或多個(gè)文件。默認(rèn)情況下，它使用操作系統(tǒng)的本機(jī)文件瀏覽器上傳單個(gè)文件。成功上傳后，F(xiàn)ile API 使得可以使用簡(jiǎn)單的 JS 代碼讀取File對(duì)象。要讀取File對(duì)象，我們需要監(jiān)聽 change事件。

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

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

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

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

在控制臺(tái)中觀察輸出結(jié)果，這里關(guān)注一下FileList數(shù)組和File對(duì)象，該對(duì)象具有有關(guān)上傳文件的所有元數(shù)據(jù)信息。

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

2. 多文件上傳

如果我們想上傳多個(gè)文件，需要在標(biāo)簽上添加 multiple 屬性：

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

現(xiàn)在，我們可以上傳多個(gè)文件了，以前面事例為基礎(chǔ)，選擇多個(gè)文件上傳后，觀察一下控制臺(tái)的變化：

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

3.了解文件元數(shù)據(jù)

每當(dāng)我們上傳文件時(shí)，File對(duì)象都有元數(shù)據(jù)信息，例如file name，size，last update time，type 等等。這些信息對(duì)于進(jìn)一步的驗(yàn)證和特殊處理很有用。

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

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

  // 遍歷并獲取元數(shù)據(jù)
  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 });
  }
});

下面是單個(gè)文件上傳的輸出結(jié)果：

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

4.了解 accept 屬性

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

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

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

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

5. 管理文件內(nèi)容

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

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

// FileReader 實(shí)例
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;
  });
});

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

6.驗(yàn)證文件大小

如果用戶上傳圖片過大，為了不讓服務(wù)器有壓力，我們需要限制圖片的大小，下面是允許用戶上傳小于 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;
});

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

7. 顯示文件上傳進(jìn)度

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

const reader = new FileReader();

FileReader還有一個(gè)progress 事件，表示當(dāng)前上傳進(jìn)度，配合HTML5的progress標(biāo)簽，我們來模擬一下文件的上傳進(jìn)度。

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

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

8. 怎么上傳目錄上傳?

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

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

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

用戶必須需要確認(rèn)才能上傳目錄

用戶單擊“上傳”按鈕后，就會(huì)進(jìn)行上傳。這里要注意的重要一點(diǎn)。FileList數(shù)組將以平面結(jié)構(gòu)的形式包含有關(guān)上載目錄中所有文件的信息。對(duì)于每個(gè)File對(duì)象，webkitRelativePath屬性表示目錄路徑。

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

現(xiàn)在，F(xiàn)ile 對(duì)象將將webkitRelativePath填充為：

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

9. 拖拽上傳

不支持文件上傳的拖拽就有點(diǎn) low 了，不是嗎?我們來看看如何通過幾個(gè)簡(jiǎn)單的步驟實(shí)現(xiàn)這一點(diǎn)。

首先，創(chuàng)建一個(gè)拖放區(qū)域和一個(gè)可選的區(qū)域來顯示上傳的文件內(nèi)容。

<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 區(qū)域。

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

添加一個(gè)dragover 事件處理程序，以顯示將要復(fù)制的內(nèi)容的效果:

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

接下來，我們需要一個(gè)drop事件監(jiān)聽器來處理。

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


});

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

10. 使用objectURL處理文件

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

URL.revokeObjectURL() 靜態(tài)方法用來釋放一個(gè)之前已經(jīng)存在的、通過調(diào)用 URL.createObjectURL() 創(chuàng)建的 URL 對(duì)象。當(dāng)你結(jié)束使用某個(gè) URL 對(duì)象之后，應(yīng)該通過調(diào)用這個(gè)方法來讓瀏覽器知道不用在內(nèi)存中繼續(xù)保留對(duì)這個(gè)文件的引用了。


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;
});

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

總結(jié)

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

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

tml5文件分割上傳解決方案

html5提供的文件API中可以輕松的對(duì)文件進(jìn)行分割切片, 然后通過javascript異步處理向服務(wù)器傳輸數(shù)據(jù), 突破對(duì)大文件上傳的限制, 同時(shí)異步處理在一定程度上也提高了文件上傳的效率。用戶體驗(yàn)上也優(yōu)于前述方案。

index.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>大文件上傳實(shí)例</title>
<script type="text/javascript">
    const BYTES_PER_CHUNK = 1024 * 1024; // 每個(gè)文件切片大小定為1MB .
    var slices;
    var totalSlices;
    //發(fā)送請(qǐng)求
    function sendRequest() {
        var blob = document.getElementById('file').files[0];
        var start = 0;
        var end;
        var index = 0;
        // 計(jì)算文件切片總數(shù)
        slices = Math.ceil(blob.size / BYTES_PER_CHUNK);
        totalSlices= slices;
        while(start < blob.size) {
        end = start + BYTES_PER_CHUNK;
        if(end > blob.size) {
            end = blob.size;
        }
        uploadFile(blob, index, start, end);
        start = end;
        index++;
        }
    }
    //上傳文件
    function uploadFile(blob, index, start, end) {
        var xhr;
        var fd;
        var chunk;
        xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
        if(xhr.responseText) {
            alert(xhr.responseText);
        }
        slices--;
        // 如果所有文件切片都成功發(fā)送，發(fā)送文件合并請(qǐng)求。
        if(slices == 0) {
            mergeFile(blob);
            alert('文件上傳完畢');
        }
        }
        };
        chunk =blob.slice(start,end);//切割文件
        //構(gòu)造form數(shù)據(jù)
        fd = new FormData();
        fd.append("file", chunk);
        fd.append("name", blob.name);
        fd.append("index", index);
        xhr.open("POST", "upload.php", true);
        //設(shè)置二進(jìn)制文邊界件頭
        xhr.setRequestHeader("X_Requested_With", location.href.split("/")[3].replace(/[^a-z]+/g, '$'));
        xhr.send(fd);
    }
    function mergeFile(blob) {
        var xhr;
        var fd;
        xhr = new XMLHttpRequest();
        fd = new FormData();
        fd.append("name", blob.name);
        fd.append("index", totalSlices);
        xhr.open("POST", "merge.php", true);
        xhr.setRequestHeader("X_Requested_With", location.href.split("/")[3].replace(/[^a-z]+/g, '$'));
        xhr.send(fd);
    }
</script>
</head>
<body>
<input type="file" id="file"/>
<button onclick="sendRequest()">上傳</button>
</body>
</html>

upload.php

<?php
//省略了文件接收判斷isset部分
//當(dāng)前目錄下建立一個(gè)uploads文件夾
//接收文件名時(shí)進(jìn)行轉(zhuǎn)碼，防止中文亂碼。
$target = "uploads/" .iconv("utf-8","gbk",$_POST["name"]) . '-' . $_POST['index'];
move_uploaded_file($_FILES['file']['tmp_name'], $target);
// Might execute too quickly.
sleep(1);
?>

merge.php

<?php
//文件合并
$target = "uploads/" .iconv("utf-8","gbk",$_POST["name"]);
$dst = fopen($target, 'wb');
for($i = 0; $i < $_POST['index']; $i++) {
$slice = $target . '-' . $i;
$src = fopen($slice, 'rb');
stream_copy_to_stream($src, $dst);
fclose($src);
unlink($slice);
}
fclose($dst);

關(guān)鍵函數(shù)stream_copy_to_stream()

int stream_copy_to_stream ( resource $source , resource $dest [, int $maxlength = -1 [, int $offset = 0 ]] )

<?php
$src = fopen('http://www.example.com', 'r');
$dest1 = fopen('first1k.txt', 'w');
$dest2 = fopen('remainder.txt', 'w');
echo stream_copy_to_stream($src, $dest1, 1024) . " bytes copied to first1k.txt\n";
echo stream_copy_to_stream($src, $dest2) . " bytes copied to remainder.txt\n";
?>

var blob = document.getElementById('file').files[0];
console.dir(blob);

相關(guān)的屬性如下:

lastModified: 1511081596000

lastModifiedDate: Sun Nov 19 2017 16:53:16 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間) {}

name: "IMG_20171119_165316.jpg"

size: 4383101

type: "image/jpeg"

slice: ? slice() 用于切割文件

tml5超大文件上傳和斷點(diǎn)續(xù)傳的實(shí)現(xiàn)，html5超大文件上傳的實(shí)現(xiàn)，html5超大文件上傳解決方案，html5超大文件上傳思路，html5超大文件上傳實(shí)例，html5超大文件上傳源碼，html5超大文件分片上傳，html5超大文件分塊上傳，html5超大文件加密上傳，html5文件夾上傳，

要求操作便利，一次選擇多個(gè)文件和文件夾進(jìn)行上傳；

支持PC端全平臺(tái)操作系統(tǒng)，Windows,Linux,Mac

支持文件和文件夾的批量下載，斷點(diǎn)續(xù)傳。刷新頁面后繼續(xù)傳輸。關(guān)閉瀏覽器后保留進(jìn)度信息。

支持文件夾批量上傳下載，服務(wù)器端保留文件夾層級(jí)結(jié)構(gòu)，服務(wù)器端文件夾層級(jí)結(jié)構(gòu)與本地相同。

支持大文件批量上傳（20G）和下載，同時(shí)需要保證上傳期間用戶電腦不出現(xiàn)卡死等體驗(yàn)；

支持文件夾上傳，文件夾中的文件數(shù)量達(dá)到1萬個(gè)以上，且包含層級(jí)結(jié)構(gòu)。

支持?jǐn)帱c(diǎn)續(xù)傳，關(guān)閉瀏覽器或刷新瀏覽器后仍然能夠保留進(jìn)度。

支持文件夾結(jié)構(gòu)管理，支持新建文件夾，支持文件夾目錄導(dǎo)航

交互友好，能夠及時(shí)反饋上傳的進(jìn)度；

服務(wù)端的安全性，不因上傳文件功能導(dǎo)致JVM內(nèi)存溢出影響其他功能使用；

最大限度利用網(wǎng)絡(luò)上行帶寬，提高上傳速度；

對(duì)于大文件的處理，無論是用戶端還是服務(wù)端，如果一次性進(jìn)行讀取發(fā)送、接收都是不可取，很容易導(dǎo)致內(nèi)存問題。所以對(duì)于大文件上傳，采用切塊分段上傳

從上傳的效率來看，利用多線程并發(fā)上傳能夠達(dá)到最大效率。

文件上傳頁面的前端可以選擇使用一些比較好用的上傳組件，例如百度的開源組件WebUploader，這些組件基本能滿足文件上傳的一些日常所需功能，如異步上傳文件，文件夾，拖拽式上傳，黏貼上傳，上傳進(jìn)度監(jiān)控，文件縮略圖，甚至是大文件斷點(diǎn)續(xù)傳，大文件秒傳。

在web項(xiàng)目中上傳文件夾現(xiàn)在已經(jīng)成為了一個(gè)主流的需求。在OA，或者企業(yè)ERP系統(tǒng)中都有類似的需求。上傳文件夾并且保留層級(jí)結(jié)構(gòu)能夠?qū)τ脩粜谐珊芎玫囊龑?dǎo)，用戶使用起來也更方便。能夠提供更高級(jí)的應(yīng)用支撐。

下載示例：

https://gitee.com/xproer/up6-jsp-eclipse/tree/6.5.40/

工程

NOSQL

NOSQL示例不需要任何配置，可以直接訪問測(cè)試

創(chuàng)建數(shù)據(jù)表

選擇對(duì)應(yīng)的數(shù)據(jù)表腳本，這里以SQL為例

修改數(shù)據(jù)庫(kù)連接信息

訪問頁面進(jìn)行測(cè)試

文件存儲(chǔ)路徑

up6/upload/年/月/日/guid/filename

相關(guān)問題：
1.javax.servlet.http.HttpServlet錯(cuò)誤
2.項(xiàng)目無法發(fā)布到tomcat
3.md5計(jì)算完畢后卡住
4.服務(wù)器找不到config.json文件

相關(guān)參考：

文件保存位置

源碼工程文檔：https://drive.weixin.qq.com/s?k=ACoAYgezAAw1dWofra

源碼報(bào)價(jià)單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwoiul8gl

OEM版報(bào)價(jià)單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwuzp4W0a

產(chǎn)品源代碼：https://drive.weixin.qq.com/s?k=ACoAYgezAAwbdKCskc
授權(quán)生成器：https://drive.weixin.qq.com/s?k=ACoAYgezAAwTIcFph1

在線咨詢

上一篇：HTML 中 target 屬性的精彩應(yīng)用
下一篇：HTML5網(wǎng)頁設(shè)計(jì)制作作業(yè)-環(huán)境保護(hù)組織HTML5網(wǎng)站模板

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商