前端實現文件上傳（點擊+拖拽）
一、簡介
之前在Vue項目中使用過element的上傳組件，實現了點擊上傳+拖拽上傳的兩種上傳功能。然后我就在想是否可以通過原生的html+js來實現文件的點擊上傳和拖拽上傳，說干就干。
首先是點擊獲取上傳文件自然沒的說，只需要借助input標簽即可，但原生的點擊上傳按鈕，實在是過于簡陋，所以我的想法是通過一個div，模擬成上傳按鈕，然后監聽其點擊事件，通過input.click()去模擬點擊真正的上傳元素。
然后是拖拽獲取上傳文件，這個稍有難度，我的想法是通過HTML5新增的drag拖放API+dataTransfer來實現文件的拖拽獲取，但是由于是html5新增的，所以可能在某些低版本IE瀏覽器不兼容，所以如果要在實際企業級項目中使用,需要注意一下兼容性問題（IE該死!）。
最后當我們獲取到上傳文件之后，我們就可以借助formDate對象以及ajax工具（原生、jquery、axios等）進行文件上傳了,而且我們還可以通過xhr.upload.onprogress獲取文件上傳的進度在頁面中進行展示。
二、獲取文件
1、頁面效果
2、點擊和拖拽上傳獲取的文件結果
3、具體代碼
<style>
.box {
width: 300px;
height: 300px;
margin: 50px auto;
padding-top: 30px;
background-color: #f5f5f5;
border-radius: 10px;
}
.btn {
width: 200px;
height: 30px;
line-height: 30px;
margin: 10px auto;
text-align: center;
color: #5098F8;
border-radius: 4px;
border: 1px dashed #5098F8;
cursor: pointer;
}
</style>
<body>
<!-- 這個id屬性放在哪個盒子里面 哪個盒子的范圍就是拖拽上傳的范圍 -->
<div class="box" id="drop">
<!-- 用來展示的上傳按鈕 -->
<div class="btn" id="btn">點擊上傳按鈕</div>
<!-- 實際實現上傳的input 并限制文件類型（不保險，因為用戶可以放手放開限制，選擇所有類型文件，所以需要在上傳之前進行第二次驗證） -->
<input type="file" id="file-btn" onchange="selectFile(event)" accept=".doc,.docx" style="display: none;">
</div>
<script>
var file = null // 要進行上傳的文件
// 給上傳按鈕綁定點擊事件
document.querySelector('#btn').onclick = function() {
// 模擬點擊上傳的input 彈出文件選擇框
document.querySelector('#file-btn').click()
}
// 獲取點擊上傳 選擇的文件
function selectFile(e) {
// 通過 e.target.files 獲取到選擇的文件 此處默認選擇一個文件
console.log('獲取點擊上傳的文件---',e.dataTransfer.files[0]);
// 第二次驗證選擇的文件類型是否正確
if(e.target.files[0].type == 'application/msword' || e.target.files[0].type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
file = e.target.files[0]
} else {
alert('請選擇正確的文件類型')
}
}
// 拖拽上傳獲取對應文件
let dropBox=document.querySelector('#drop');
// 當文件在目標元素內移動時
dropBox.addEventListener('dragover',function(e){
// 阻止事件冒泡
e.stopPropagation();
// 阻止默認事件（與drop事件結合，阻止拖拽文件在瀏覽器打開的默認行為）
e.preventDefault();
})
// 當拖拽文件在目標元素內松開時
dropBox.addEventListener('drop',function(e){
// 阻止事件冒泡
e.stopPropagation();
// 阻止默認事件（與dragover事件結合，阻止拖拽文件在瀏覽器打開的默認行為）
e.preventDefault();
// 獲取拖拽上傳的文件（files是個數組 此處默認限制只能上傳一個）
console.log('獲取拖拽上傳的文件---',e.dataTransfer.files[0]);
// 第二次驗證選擇的文件類型是否正確
if(e.dataTransfer.files[0].type == 'application/msword' || e.dataTransfer.files[0].type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
file = e.dataTransfer.files[0]
} else {
alert('請選擇正確的文件類型')
}
})
</script>
</body>
注：用戶手動放開限制操作（此處以mac電腦為例，windows電腦也相差不多），只需下面三步：
三、進行上傳
我們需要借助formDate對象以及ajax工具（原生、jquery、axios等）進行文件上傳，而且我們還可以通過xhr.upload.onprogress獲取文件上傳的進度在頁面中進行展示，不過我們通過xhr.upload.onprogress獲取的僅僅是文件上傳到服務器的進度，并不包括服務器進行處理以及基于前端響應的這部分時間，所以會當前端文件上傳到100%后，會停滯一段時間才能獲得服務端的響應。
此處列舉兩種方式：原生ajax和axios。
1、原生ajax
// 上傳函數
function uplaod() {
// 創建 FormData 對象
var formData = new FormData();
// 將獲得文件對象追加到 FormData 對象中
formData.append('file',file)
// 創建 xhr 對象
var xhr = new XMLHttpRequest()
// 調用 open 函數，指定請求類型與URL地址。其中，請求類型必須為 POST
xhr.open('POST', 'www.baidi.com')
// 發起請求
xhr.send(fd)
// 監聽 xhr.upload 的 onprogress 事件 獲取上傳進度
xhr.upload.onprogress = function(e) {
// e.lengthComputable 是一個布爾值，表示當前上傳的資源是否具有可計算的長度
if (e.lengthComputable) {
// Math.round() 進行四舍五入取整 因為上傳時 網絡等不確定因素可能會出現缺失小部分字節的情況
// e.loaded 已傳輸的字節
// e.total 需傳輸的總字節
var progress = Math.round((e.loaded / e.total) * 100) + '%'
}
}
// 是否上傳成功
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText)
if (data.status === 200) {
console.log('上傳文件成功');
}
}
}
2、axios（vue）
// 上傳函數(vue中)
async uplaod() {
// 創建 FormData 對象
var formData = new FormData();
// 將獲得文件對象追加到 FormData 對象中
formData.append('file',file)
try {
// 暫存this對象
const that = this
// 調用接口開始上傳
await this.$axios.post(api.addfiles, formData, {
// 實時獲取上傳進度
onUploadProgress (progressEvent) {
// Math.round() 進行四舍五入取整 因為上傳時 網絡等不確定因素可能會出現缺失小部分字節的情況
// loaded 已傳輸的字節
// total 需傳輸的總字節
that.progress = Math.round((progressEvent.loaded / progressEvent.total) * 100) + '%'
}
console.log('上傳成功')
} catch(error) {
console.log('上傳失敗',error)
}
參考文章：http://blog.ncmem.com/wordpress/2023/12/26/%e5%89%8d%e7%ab%af%e5%ae%9e%e7%8e%b0%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%ef%bc%88%e7%82%b9%e5%87%bb%e6%8b%96%e6%8b%bd%ef%bc%89/
歡迎入群一起討論
浙公網安備 33010602011771號