當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

js上传文件；input上传文件；

發布時間：2023/12/9 编程问答 20 豆豆

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

html原生上傳文件方式1：

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>Document</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;console.log(document.getElementById("f1"), fileList);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);}console.log(file);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>

html原生上傳文件方式2：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style>#progress {height: 10px;width: 500px;border: 1px solid gold;position: relative;border-radius: 5px;}#progress .progress-item {height: 100%;position: absolute;left: 0;top: 0;background: chartreuse;border-radius: 5px;transition: width 0.3s linear;}</style></head><body>文件上傳框<br /><input type="file" id="file" /><br />顯示進度條<br /><div id="progress"><div class="progress-item"></div></div>上傳成功后的返回內容<br /><span id="callback"></span></body><script>//首先監聽input框的變動，選中一個新的文件會觸發change事件document.querySelector("#file").addEventListener("change", function () {//獲取到選中的文件var file = document.querySelector("#file").files[0];//創建formdata對象var formdata = new FormData();formdata.append("file", file);//創建xhr，使用ajax進行文件上傳var xhr = new XMLHttpRequest();xhr.open("post", "https://dcdn-jiazheng.21cs.cn/file/upload");//回調xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {document.querySelector("#callback").innerText = xhr.responseText;}};//獲取上傳的進度xhr.upload.onprogress = function (event) {if (event.lengthComputable) {var percent = (event.loaded / event.total) * 100;document.querySelector("#progress .progress-item").style.width =percent + "%";}};//將formdata上傳xhr.send(formdata);});</script> </html>

其他好的上傳組件

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

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

上一篇：【经验分享】Hydra(爆破神器)使用方
下一篇：计算机安装的网络协议怎么看,怎么检查电脑