日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問(wèn) 生活随笔！

生活随笔

當(dāng)前位置： 首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時(shí)間：2023/12/9 编程问答 26 豆豆
生活随笔 收集整理的這篇文章主要介紹了 js上传文件；input上传文件； 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

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() {//獲得文件列表，注意這里不是數(shù)組，而是對(duì)象var fileList = document.getElementById("f1").files;console.log(document.getElementById("f1"), fileList);if (!fileList.length) {alert("請(qǐng)選擇文件");return;}var file = new FormData(); //構(gòu)造FormData對(duì)象// file.append('title', document.getElementById('title').value);//多文件上傳需要遍歷添加到 fromdata 對(duì)象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(); //創(chuàng)建對(duì)象xhr.open("POST", "https://dcdn-jiazheng.21cs.cn/file/upload");// xhr.setRequestHeader("Content-Type", "multipart/form-data");// xhr.setRequestHeader("Authorization", token);xhr.send(file); //發(fā)送時(shí) Content-Type默認(rèn)就是: 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 />顯示進(jìn)度條<br /><div id="progress"><div class="progress-item"></div></div>上傳成功后的返回內(nèi)容<br /><span id="callback"></span></body><script>//首先監(jiān)聽(tīng)input框的變動(dòng)，選中一個(gè)新的文件會(huì)觸發(fā)change事件document.querySelector("#file").addEventListener("change", function () {//獲取到選中的文件var file = document.querySelector("#file").files[0];//創(chuàng)建formdata對(duì)象var formdata = new FormData();formdata.append("file", file);//創(chuàng)建xhr，使用ajax進(jìn)行文件上傳var xhr = new XMLHttpRequest();xhr.open("post", "https://dcdn-jiazheng.21cs.cn/file/upload");//回調(diào)xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {document.querySelector("#callback").innerText = xhr.responseText;}};//獲取上傳的進(jìn)度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>

其他好的上傳組件

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的js上传文件；input上传文件；的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。