生活随笔
收集整理的這篇文章主要介紹了
原生JS实现文件上传
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章導航
- 1. 不使用 form 標簽
- 2. 使用 form 標簽
1. 不使用 form 標簽
不使用 form 標簽，在提交的時候手動獲取 input[type='file'] 的 files 文件列表，手動處理數據：
let files
= document
.getElementById("input-upload").files
let formData
=new FormData()
formData
.append("file", files
[0])
2. 使用 form 標簽
使用 form 的時候一般不用 form 原生的 submit 提交方式,可以為 form 添加 onsubmit="return false" 來阻止默認的提交事件
使用form的優點
可以使用 new FormData(document.getElementById("formID")) 來獲取整個表單的數據
注意點:
使用 fetch() 的時候不應該單獨設置 headers:{"Content-Type":"multipart/form-data"}
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document
</title>
</head>
<style>html,body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}button {outline: none;border: none;border-radius: 2px;border-top-right-radius: 5px;border-bottom-left-radius: 5px;}button:hover {cursor: pointer;box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2);}#input-uploader {display: none;}.wrapper {border: 0.5px solid rgba(200, 200, 200, 0.1);padding: 20px;max-width: 1000px;text-align: center;margin: 100px auto;border-radius: 10px;}.primary-button {font-size: 1rem;color: #fefefe;background-color: rgb(117, 183, 245);border: none;border: 0.2px solid #7cd5f8;background-image: linear-gradient(45deg, rgba(117, 183, 245, 1), rgba(124, 213, 248, 1));outline: none;padding: 2px 10px;transition: all 0.2s ease;}
</style><body><div class="wrapper"><form id="formData" onsubmit="return false;"><input type="file" webkitdirectory id="input-uploader" name="fileUpload"onchange="handleFileChange(this)" /><button class="primary-button button-upload" onclick="showUploader()">上傳文件夾
</button></form></div>
</body>
<script>const requestApi = ({url,method = 'GET',...fetchProps}) => {return fetch(url, {method,...fetchProps}).then(res => res && res.status === 200 && res.json()).catch(err => alert('未知錯誤')).then(res => res)}const showUploader = () => {let uploaderInput = document.getElementById("input-uploader")uploaderInput.click()}handleFileChange = () => {let fileData = document.getElementById("input-uploader")const { files, value, form } = fileDatalet formData = new FormData();Array.from(files).forEach(item => formData.append("uploadFile", item))console.log(formData)handleUploadFile(formData).then(res => {if (res && res.success) {alert('上傳成功')} else {alert(res?.message || '上傳失敗')}console.log(res)}).catch(err => alert('出錯'))}const handleUploadFile = (formData = {}) =>requestApi({url: `http://rap2api.taobao.org/app/mock/data/2079322`,method: 'POST',body: formData});</script>
</html>
總結
以上是生活随笔為你收集整理的原生JS实现文件上传的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
