當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS实现文件的上传与下载

發布時間：2023/12/31 javascript 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS实现文件的上传与下载小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

原生JS實現文件上傳

利用<input type="file">，帶有 type="file" 的 <input> 元素允許用戶可以從他們的設備中選擇一個或多個文件。選擇后，這些文件可以使用提交表單的方式上傳到服務器上，或者通過 Javascript 代碼和文件 API 對文件進行操作。
利用URL.createObjectURL()，URL.createObjectURL() 靜態方法會創建一個 DOMString，其中包含一個表示參數中給出的對象的 URL。這個 URL 的生命周期和創建它的窗口中的 document 綁定。這個新的 URL 對象表示指定的 File 對象或 Blob 對象。

<body><input type="file" value="選擇文件" id="file"><img src="" id="img" alt="暫無" width="70" height="70"> </body> <script>const file = document.querySelector("#file");const img = document.querySelector("#img");file.onchange = function(e) {console.log(e);img.src = URL.createObjectURL(e.target.files[0]);} </script>

演示：

上傳前：
上傳成功：

原生JS實現文件下載

<body><input type="file" value="選擇文件" id="file"><img src="" id="img" alt="暫無" width="70" height="70"><button id="down">下載</button> </body> <script>const file = document.querySelector("#file");const img = document.querySelector("#img");const down = document.querySelector("#down");let file1 = null;file.onchange = function(e) {console.log(e);file1 = e.target.files[0]; // 文件上傳img.src = URL.createObjectURL(e.target.files[0]);}down.onclick = function() {let a = document.createElement("a");a.setAttribute("href", URL.createObjectURL(file1));a.setAttribute("download", "filename");a.click();} </script>

Vue實現文件上傳與下載

下載

三種方式：

前端創建超鏈接，通過a標簽的鏈接向后端發送get請求，接收后端的文件流。（或者創建div標簽，動態創建a標簽）

通過創建iframe

向后端發送post請求，使用Blob格式

上傳

1.input方式

vue中的文件上傳主要分為兩步：前臺獲取到文件和提交到后臺。

步驟：

①前臺獲取文件，主要是采用input框來實現
通過file類型的input框實現文件上傳；然后通過設置multiple="multiplt"實現了多文件上傳，并且使用accept實現了上傳文件類型限制；最后通過監聽change事件，前臺獲取到上傳的文件；通過change事件中的event.target.files就能獲取到上傳的文件了，在上面再次對獲取的文件進行了類型限制。

②數據提交
獲取到文件數據后，采用FormData的方式將數據提交到后臺。

element-ui的el-uplod組件實現
Upload 上傳

參考：
vue上傳文件和下載文件
vue 實現文件上傳、下載的方法

總結

以上是生活随笔為你收集整理的JS实现文件的上传与下载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Scala下载地址
下一篇： js调用html文件上传,JavaScr