當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
原生H5+JS文件上传
生活随笔
收集整理的這篇文章主要介紹了
原生H5+JS文件上传
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
最近，一個項目上使用到一些數據，這些數據必須要從本地導入，因此提供了相關的服務端上傳接口，然鵝我是一個純純的后端，前端的各種框架都不太會使，并且我認為這樣的小項目使用一個前端框架反而不好，比如LayUi，雖然很簡單就可以引入，但是有時候我需要做些特殊操作，修改人家源碼的底層方法還是不太方便，因一頓google后實現了純H5+JS實現的方法，連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的原生方法實現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');//這里可以設置請求頭，注意setRequestHeader方法必須放在open之后//xhr.setRequestHeader('hahaha', '123123123sadfsdf');xhr.send(formData);}</script></body> </html>二、多文件上傳（循環上傳）
<!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" >//當前線程延時function sleep(numberMillis) {var now = new Date();var exitTime = now.getTime() + numberMillis;while (true) {now = new Date();if (now.getTime() > exitTime)return;}}//單個文件上傳（入參file，每次上傳一個文件）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');//這里可以設置請求頭，注意setRequestHeader方法必須放在open之后//xhr.setRequestHeader('hahaha', '123123123sadfsdf');xhr.send(formData);}//批量上傳（循環調用單文件上傳）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對象為用戶選擇的某一個文件console.log(file.name); //此時取出這個文件進行處理，這里只是顯示文件名//這里可以調用單個文件上傳方法//uploadFile(file);//這里為了方便看到每一個文件，進行了當前線程延時sleep(500);}}</script> </body> </html>最后，注意：我這里是循環調用上傳，其實還是單個上傳，只不過是程序內部自動實現了循環調用，想要實現一次性并發上傳的童鞋，可以查一下，方法太多，正式因為循環上傳文章太少，我才寫這篇文檔，有人會說，并發多好，為什么要循環上傳呢，其實這種情況大有存在，比如說服務端接口太垃圾不能支持高的并發調用（尤其單機服務），還有比如服務端數據解析要求文件的先后順序以及入庫的數據讀寫一致性等等，而我們循環調用往往能適合更多場景，雖然他并不如并發調用快速，其實底層對服務端接口壓力是一樣的（調用次數一致）；
總結
以上是生活随笔為你收集整理的原生H5+JS文件上传的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSDN-markdown编辑器语法——
- 下一篇： 《JavaScript高级程序设计》学习