javascript
原生H5+JS文件上传
最近，一個(gè)項(xiàng)目上使用到一些數(shù)據(jù)，這些數(shù)據(jù)必須要從本地導(dǎo)入，因此提供了相關(guān)的服務(wù)端上傳接口，然鵝我是一個(gè)純純的后端，前端的各種框架都不太會使，并且我認(rèn)為這樣的小項(xiàng)目使用一個(gè)前端框架反而不好，比如LayUi，雖然很簡單就可以引入，但是有時(shí)候我需要做些特殊操作，修改人家源碼的底層方法還是不太方便，因一頓google后實(shí)現(xiàn)了純H5+JS實(shí)現(xiàn)的方法，連ajax都使用的原生；記錄一下：
一、單文件上傳
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>上傳文件Demo</title></head><body>qmfy文件管理<div style="padding: 4px; background-color: #FFECEC;"><form id="upload" method="POST" enctype="multipart/form-data"><input type="file" name="file"/><input type="button" value="提交" onClick="uploadFile();"/></form></div><script type="text/javascript" >function uploadFile() {var form = document.getElementById('upload'),formData = new FormData(form);//這里使用ajax的原生方法實(shí)現(xiàn)var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){if(xhr.readyState === 4){if(xhr.status === 200){var result = JSON.parse(xhr.responseText);window.alert(result.message);}else{var result = JSON.parse(xhr.responseText);window.alert("ERROR："+"\n"+result.message);}}}xhr.withCredentials = true;xhr.open('POST','http:hahaha.zz.com/upload');//這里可以設(shè)置請求頭，注意setRequestHeader方法必須放在open之后//xhr.setRequestHeader('hahaha', '123123123sadfsdf');xhr.send(formData);}</script></body> </html>二、多文件上傳（循環(huán)上傳）
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>上傳文件</title> </head> <body>qmfy文件管理<div style="padding: 4px; background-color: #FFECEC;"><form id="upload" method="POST" enctype="multipart/form-data"><input type="file" id="multifile" multiple size="50"/><input type="button" value="提交" onClick="uploadFiles();"/></form></div><script type="text/javascript" >//當(dāng)前線程延時(shí)function sleep(numberMillis) {var now = new Date();var exitTime = now.getTime() + numberMillis;while (true) {now = new Date();if (now.getTime() > exitTime)return;}}//單個(gè)文件上傳（入?yún)ile，每次上傳一個(gè)文件）function uploadFile(file) {var formData = new FormData();formData.append("file",file);var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){if(xhr.readyState === 4){if(xhr.status === 200){var result = JSON.parse(xhr.responseText);window.alert(result.message);}else{var result = JSON.parse(xhr.responseText);window.alert("ERROR："+"\n"+result.message);}}}xhr.withCredentials = true;xhr.open('POST','http://hahahha.zz.com/upload');//這里可以設(shè)置請求頭，注意setRequestHeader方法必須放在open之后//xhr.setRequestHeader('hahaha', '123123123sadfsdf');xhr.send(formData);}//批量上傳（循環(huán)調(diào)用單文件上傳）function uploadFiles(){console.log(" FileList Demo:");var file; //取得FileList取得的file集合for(var i = 0 ;i<document.getElementById("multifile").files.length;i++){file=document.getElementById("multifile").files[i]; //file對象為用戶選擇的某一個(gè)文件console.log(file.name); //此時(shí)取出這個(gè)文件進(jìn)行處理，這里只是顯示文件名//這里可以調(diào)用單個(gè)文件上傳方法//uploadFile(file);//這里為了方便看到每一個(gè)文件，進(jìn)行了當(dāng)前線程延時(shí)sleep(500);}}</script> </body> </html>最后，注意：我這里是循環(huán)調(diào)用上傳，其實(shí)還是單個(gè)上傳，只不過是程序內(nèi)部自動實(shí)現(xiàn)了循環(huán)調(diào)用，想要實(shí)現(xiàn)一次性并發(fā)上傳的童鞋，可以查一下，方法太多，正式因?yàn)檠h(huán)上傳文章太少，我才寫這篇文檔，有人會說，并發(fā)多好，為什么要循環(huán)上傳呢，其實(shí)這種情況大有存在，比如說服務(wù)端接口太垃圾不能支持高的并發(fā)調(diào)用（尤其單機(jī)服務(wù)），還有比如服務(wù)端數(shù)據(jù)解析要求文件的先后順序以及入庫的數(shù)據(jù)讀寫一致性等等，而我們循環(huán)調(diào)用往往能適合更多場景，雖然他并不如并發(fā)調(diào)用快速，其實(shí)底層對服務(wù)端接口壓力是一樣的（調(diào)用次數(shù)一致）；
總結(jié)
以上是生活随笔為你收集整理的原生H5+JS文件上传的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSDN-markdown编辑器语法——
- 下一篇： 《JavaScript高级程序设计》学习