【复习】原生Js实现文件上传
生活随笔
收集整理的這篇文章主要介紹了
【复习】原生Js实现文件上传
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
🎯 Demo
效果：如上圖所示
🎯 起步
首先，要想實現文件上傳，至少得有兩個標簽。
- input，用來輸入文件，
- button，用來觸發文件上傳函數
input 標簽屬性解析
type = “file” 的含義 類型是上傳文件類型
multiple 的含義 可以上傳多個文件
js代碼的書寫
首先我們來看下接口信息。（因為本教程側重的是前端代碼，所以就不放接口的Java源碼了）
接口需要兩個參數
- 一個是header 的 authorization ,也就是令牌
- 另一個就是我們的重點，文件參數。
Js代碼首先肯定是要獲取用戶上傳的文檔
//獲得文件列表，注意這里不是數組，而是對象 var fileList = document.getElementById('f1').files; //f1是input type="file" 的那個標簽 if (!fileList.length) { //如果文件為空，觸發它alert('請選擇文件');return; } var file = new FormData(); //構造FormData對象,這個就是我們最終上傳的文件//多文件上傳需要遍歷添加到 fromdata 對象 for (var i = 0; i < fileList.length; i++) {file.append('file', fileList[i]); //formData.append(name, value); //由于我接口要求的參數名是file，所以我第一個設置的是file，如果你要用于你的項目，請根據后端提供的接口調整name的值 }//打印 目前file里的全部內容 for (var value of file.values()) {console.log(value); }然后就是xhr進行文件的上傳
var xhr = new XMLHttpRequest(); //創建對象xhr.open("POST", "https://dcdn-jiazheng.21cs.cn/file/upload"); //鏈接改成你項目中的xhr.setRequestHeader("Authorization", token); //令牌改成你項目中的xhr.send(file); //發送時 Content-Type默認就是: multipart/form-data; xhr.onreadystatechange = function() {console.log('state change', xhr.readyState);if (this.readyState == 4 && this.status == 200) {var obj = JSON.parse(xhr.responseText); //返回值console.log(obj);//if (obj.data) { // alert('上傳成功');//}} }🎯 完整代碼
下面代碼中的url和token請改成你自己的。
<!--* @Author: 夏2同學* @Date: 2020-07-15 22:06:32* @LastEditTime: 2020-07-18 13:17:27* @LastEditors: 夏2同學* @FilePath: \學習JavaScript\index.html* @Description: --><!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><script></script></head><body><div>選擇文件(可多選):<input type="file" id="f1" multiple /><br /><br /><button type="button" id="btn-submit">上 傳</button></div><script>function submitUpload() {//獲得文件列表，注意這里不是數組，而是對象var fileList = document.getElementById('f1').files;if (!fileList.length) {alert('請選擇文件');return;}var file = new FormData(); //構造FormData對象// file.append('title', document.getElementById('title').value);//多文件上傳需要遍歷添加到 fromdata 對象for (var i = 0; i < fileList.length; i++) {file.append('file', fileList[i]); //支持多文件上傳}for (var value of file.values()) {console.log(value);}var xhr = new XMLHttpRequest(); //創建對象xhr.open("POST", "https://dcdn-jiazheng.21cs.cn/file/upload");// xhr.setRequestHeader("Content-Type", "multipart/form-data");xhr.setRequestHeader("Authorization",token);xhr.send(file); //發送時 Content-Type默認就是: multipart/form-data; xhr.onreadystatechange = function() {console.log('state change', xhr.readyState);if (this.readyState == 4 && this.status == 200) {var obj = JSON.parse(xhr.responseText); //返回值console.log(obj);if (obj.data) {alert('上傳成功');}}}}//綁定提交事件document.getElementById('btn-submit').addEventListener('click', submitUpload);</script></body> </html>🎯 參考
https://juejin.im/post/5da14778f265da5bb628e590
總結
以上是生活随笔為你收集整理的【复习】原生Js实现文件上传的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于JavaScript 数组 的一切
- 下一篇： 【BUG解决】使用body-parser