整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
本文已經(jīng)過(guò)原作者 Tapas Adhikary 授權(quán)翻譯
上傳文件功能可以說(shuō)是項(xiàng)目經(jīng)常出現(xiàn)的需求。從在社交媒體上上傳照片到在求職網(wǎng)站上發(fā)布簡(jiǎn)歷，文件上傳無(wú)處不在。在本文中，我們將討論 HTML文件上傳支持的10種用法，希望對(duì)你有用。
我們可以將input 類(lèi)型指定為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)聽(tīng) change事件。
首先，通過(guò)id獲取文件上傳的實(shí)例:
const fileUploader = document.getElementById('file-uploader');
然后添加一個(gè)change 事件偵聽(tīng)器，以在上傳完成后讀取文件對(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
如果我們想上傳多個(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
每當(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');
// 聽(tīng)更 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
我們可以使用accept屬性來(lái)限制要上載的文件的類(lèi)型，如果只想上傳的文件格式是 .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
成功上傳文件后顯示文件內(nèi)容，站在用戶的角度上，如果上傳之后，沒(méi)有一個(gè)預(yù)覽的，就很奇怪也不體貼。
我們可以使用FileReader對(duì)象將文件轉(zhuǎn)換為二進(jìn)制字符串。然后添加load 事件偵聽(tīng)器，以在成功上傳文件時(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
如果用戶上傳圖片過(guò)大，為了不讓服務(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
更好的用戶體驗(yàn)是讓用戶知道文件上傳進(jìn)度，前面我們用過(guò)了FileReader以及讀取和加載文件的事件。
const reader = new FileReader();
FileReader還有一個(gè)progress 事件，表示當(dāng)前上傳進(jìn)度，配合HTML5的progress標(biāo)簽，我們來(lái)模擬一下文件的上傳進(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
我們可以上傳整個(gè)目錄嗎?嗯，這是可能的，但有一些限制。有一個(gè)叫做webkitdirectory的非標(biāo)準(zhǔn)屬性(目前只有谷歌瀏覽器還有Microsoft Edge支持按照文件夾進(jìn)行上傳)，它允許我們上傳整個(gè)目錄。
目前只有谷歌瀏覽器還有Microsoft Edge支持按照文件夾進(jìn)行上傳，具體可以看下百度云盤(pán)的網(wǎng)頁(yè)版的上傳按鈕，在火狐下就支持按照文件進(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
不支持文件上傳的拖拽就有點(diǎn) low 了，不是嗎?我們來(lái)看看如何通過(guò)幾個(gè)簡(jiǎn)單的步驟實(shí)現(xiàn)這一點(diǎn)。
首先，創(chuàng)建一個(gè)拖放區(qū)域和一個(gè)可選的區(qū)域來(lái)顯示上傳的文件內(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>
通過(guò)它們各自的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';
});
接下來(lái)，我們需要一個(gè)drop事件監(jiān)聽(tīng)器來(lái)處理。
dropZone.addEventListener('drop', event => {
// Get the files
const files = event.dataTransfer.files;
});
如果大家看到這里，有點(diǎn)激動(dòng)，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/ExyVoXN
有一個(gè)特殊的方法叫做URL.createobjecturl()，用于從文件中創(chuàng)建唯一的URL。還可以使用URL.revokeObjectURL()方法來(lái)釋放它。
URL.revokeObjectURL() 靜態(tài)方法用來(lái)釋放一個(gè)之前已經(jīng)存在的、通過(guò)調(diào)用 URL.createObjectURL() 創(chuàng)建的 URL 對(duì)象。當(dāng)你結(jié)束使用某個(gè) URL 對(duì)象之后，應(yīng)該通過(guò)調(diào)用這個(gè)方法來(lái)讓瀏覽器知道不用在內(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
無(wú)論何時(shí)，如果你還想學(xué)習(xí)本文涉及的一些知識(shí)，你可以在這里嘗試。
https://html-file-upload.netlify.app/
一步，先寫(xiě)html或jsp頁(yè)面，寫(xiě)一個(gè)form，enctype設(shè)置為multipart/form-data，寫(xiě)兩個(gè)input，一個(gè)type為file，一個(gè)type為submit，type的值可以用雙引號(hào)，也可不用。詳細(xì)代碼如下：<form action="uploadServlet" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="上傳">
</form>
第二步，在web.xml中設(shè)置servlet和servlet mapping，并在servlet中設(shè)置multipart-config，設(shè)置允許上傳文件的最大長(zhǎng)度，注意單位為字節(jié)，樣例中約為10M和20M。
第三步，在servlet中處理文件上傳，使用 request.getPart("file")方法獲取part，再通過(guò)part.getSubmittedFileName獲取上傳文件名，使用part.write方法寫(xiě)文件到服務(wù)中，注意路徑問(wèn)題，可以直接使用絕對(duì)路徑。
對(duì)于linux中使用tomcat，可能還需要配置tomcat的servlet.xml中的UMASK="0022"，修改前為0027。
以上便是我分享的內(nèi)容，感謝您的閱讀，非常歡迎并期待您在評(píng)論區(qū)留下寶貴的意見(jiàn)和建議。如果你在處理數(shù)據(jù)時(shí)遇到了類(lèi)似的問(wèn)題，歡迎隨時(shí)私信我，我將竭誠(chéng)為你提供幫助。同時(shí)，如果你對(duì)數(shù)據(jù)處理領(lǐng)域充滿熱情，也歡迎你與我私信交流，期待與你共同探討、學(xué)習(xí)和進(jìn)步，期待與您的每一次交流。
TML實(shí)現(xiàn)文件夾的上傳和下載，前端如何用HTML5實(shí)現(xiàn)分片上傳GB級(jí)大文件，網(wǎng)頁(yè)中實(shí)現(xiàn)文件上傳下載的三種解決方案(推薦)，HTML5實(shí)現(xiàn)文件批量上傳組件，JQUERY 實(shí)現(xiàn)文件夾上傳(保留目錄結(jié)構(gòu))，B/S大文件上傳支持?jǐn)帱c(diǎn)上傳，WebService 大文件上傳,斷點(diǎn)續(xù)傳分片，HTML+AJAX實(shí)現(xiàn)上傳大文件問(wèn)題，用HTML實(shí)現(xiàn)本地文件的上傳，HTML5實(shí)現(xiàn)大文件上傳，HTML5實(shí)現(xiàn)大文件分片上傳思路，利用HTML5分片上傳超大文件思路，
WEBUPLOADER 支持 超大上G,多附件上傳，JS 大文件分割/分片上傳，
百度WEBUPLOADER上傳視頻等大文件，WEBUPLOAD組件實(shí)現(xiàn)文件上傳功能和下載功能，JS大文件切片上傳，斷點(diǎn)續(xù)傳實(shí)現(xiàn)DEMO，前端上傳大文件的解決方案，前端上傳大文件處理（切片、斷點(diǎn)續(xù)傳），前端大文件上傳優(yōu)化方案——分片上傳，vue大文件上傳解決方案，vue大文件上傳解決方案10G，vue大文件上傳解決方案50G，vue大文件上傳解決方案100G，html5如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，
java如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，SpringBoot如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，SpringMVC如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，SpringCloud如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，
webuploader如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，百度webuploader如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，html5實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，vue如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，前端如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，JavaScript如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，
html5大文件斷點(diǎn)續(xù)傳、秒傳解決方案，html5大文件斷點(diǎn)續(xù)傳、加密上傳解決方案，html5大文件斷點(diǎn)續(xù)傳、加密存儲(chǔ)解決方案，html5大文件斷點(diǎn)續(xù)傳分片解決方案，html5大文件斷點(diǎn)續(xù)傳分塊解決方案，html5大文件斷點(diǎn)續(xù)傳分割解決方案，html5大文件斷點(diǎn)續(xù)傳切割解決方案，
后端我們公司項(xiàng)目組選的是JAVA，因?yàn)楣居凶约旱漠a(chǎn)品，所以直接使用就行了，針對(duì)客戶需求這塊是進(jìn)行擴(kuò)展。
客戶這邊實(shí)際上要傳的文件單個(gè)大小就有50G左右，所以需要支持?jǐn)帱c(diǎn)續(xù)傳和分片上傳，并且要支持多線程上傳，能夠充分利用帶寬資源。
之前在網(wǎng)上找過(guò)相關(guān)的資料，論壇里面也有網(wǎng)友交流過(guò)，還加過(guò)很多QQ群和微信群，但是結(jié)果都不太令人滿意。
技術(shù)選型的話用的是jquery，也是一個(gè)企業(yè)內(nèi)網(wǎng)系統(tǒng)，用的是之前公司的框架，只是進(jìn)行功能擴(kuò)展
分片網(wǎng)上討論的很多，基本上全部都是用的HTML5的API，這個(gè)方案也不是不能用，但是在IE下面就不行了，兼容性差了點(diǎn)，并且也不能進(jìn)行擴(kuò)展，不能進(jìn)行二次開(kāi)發(fā)，限制性非常大，我們技術(shù)同事提的要求是需要提供產(chǎn)品完整源代碼，
網(wǎng)上的文章全部都沒(méi)有提供文件夾上傳和續(xù)傳的代碼，也沒(méi)有提供數(shù)據(jù)庫(kù)操作的代碼，
另外這塊我們是要求必須提供產(chǎn)品完整源代碼，因?yàn)楹竺嫖覀冃枰砸褋?lái)維護(hù)，同時(shí)是要求能夠自主可控的
研發(fā)部門(mén)的同事調(diào)研過(guò)百度的webuploader這個(gè)組件，發(fā)現(xiàn)他實(shí)際上就是對(duì)Flash和HTML5進(jìn)行了一個(gè)封裝，本質(zhì)還是調(diào)的HTML5的API，之前在項(xiàng)目中也用過(guò)，嘗試過(guò)，但是最終都不太滿意，一個(gè)是兼容性非常差，說(shuō)的是兼容IE，但是在IE用的是Flash，在很多用戶的電腦上用不了，卡頓崩潰發(fā)生的太頻繁，文件上傳的數(shù)量一多比如幾千個(gè)，前端頁(yè)面就開(kāi)始卡了，用戶體驗(yàn)非常差。這些問(wèn)題研發(fā)部的同事都向百度反應(yīng)過(guò)，但是百度webuploader那邊一直沒(méi)人回，基本上沒(méi)人管，領(lǐng)導(dǎo)說(shuō)要求付費(fèi)提供技術(shù)支持，那邊也是沒(méi)人回，聯(lián)系不上他們?nèi)魏稳恕?/p>
webuploader這邊連個(gè)開(kāi)發(fā)人員都聯(lián)系不到，這個(gè)是怎么回事？
用戶上傳的文件比較大，有20G左右，直接用HTML傳的話容易失敗，服務(wù)器也容易出錯(cuò)，需要分片，分塊，分割上傳。也就是將一個(gè)大的文件分成若干個(gè)小文件塊來(lái)上傳，另外就是需要實(shí)現(xiàn)秒傳功能和防重復(fù)功能，秒傳就是用戶如果上傳過(guò)這個(gè)文件，那么直接在數(shù)據(jù)庫(kù)中查找記錄就行了，不用再上傳一次，節(jié)省時(shí)間，實(shí)現(xiàn)的思路是對(duì)文件做MD5計(jì)算，將MD5值保存到數(shù)據(jù)庫(kù)，算法可以用MD5，或者CRC，或者SHA1，這個(gè)隨便哪個(gè)算法都行。
切片的話還有一點(diǎn)就是在服務(wù)器上合并，一個(gè)文件的所有分片數(shù)據(jù)上傳完后需要在服務(wù)器端進(jìn)行合并操作。
視頻教程：https://www.ixigua.com/7227314770696012322
導(dǎo)入項(xiàng)目：
導(dǎo)入到Eclipse：http://www.ncmem.com/doc/view.aspx?id=9da9c7c2b91b40b7b09768eeb282e647
導(dǎo)入到IDEA：http://www.ncmem.com/doc/view.aspx?id=9fee385dfc0742448b56679420f22162
springboot統(tǒng)一配置：http://www.ncmem.com/doc/view.aspx?id=7768eec9284b48e3abe08f032f554ea2
下載示例：
https://gitee.com/xproer/up6-jsp-eclipse/tree/6.5.40/
工程
NOSQL
NOSQL示例不需要任何配置，可以直接訪問(wèn)測(cè)試
創(chuàng)建數(shù)據(jù)表
選擇對(duì)應(yīng)的數(shù)據(jù)表腳本，這里以SQL為例
修改數(shù)據(jù)庫(kù)連接信息
訪問(wèn)頁(yè)面進(jìn)行測(cè)試
文件存儲(chǔ)路徑
up6/upload/年/月/日/guid/filename
相關(guān)問(wèn)題：
1.javax.servlet.http.HttpServlet錯(cuò)誤
2.項(xiàng)目無(wú)法發(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
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
