前端JS之HTML利用XMLHttpRequest()和FormData()進行大文件分段上傳


 

用於網頁向后端上傳大文件

 

### 前端代碼
<
body> <input type="file" name="video" id="file" /> <input type="button" class="btn btn-info" id="sub" value="提交"> <script> $("#sub").on("click",selfile()) #當提交按鈕被點擊時觸發上傳 function selfile(){ const LENGTH = 1024 * 1024 * 10;//每次上傳的大小 var file = document.getElementsByName('video')[0].files[0];//文件對象 var filename=document.getElementsByName('video')[0].files[0].name; var totalSize = file.size;//文件總大小 var start = 0;//每次上傳的開始字節 var end = start + LENGTH;//每次上傳的結尾字節 var fd = null;//創建表單數據對象 var blob = null;//二進制對象 var xhr = null;//xhr對象 while(start < totalSize){ fd = new FormData();//每一次需要重新創建 xhr = new XMLHttpRequest();//需要每次創建並設置參數 xhr.open('POST','/qqq/',false); blob = file.slice(start,end);//根據長度截取每次需要上傳的數據 fd.append('file_data',blob);//添加數據到fd對象中 fd.append('filename',filename); //獲取文件的名稱 fd.append("file_size",totalSize); xhr.send(fd);//將fd數據上傳 //重新設置開始和結尾 start = end; end = start + LENGTH; } } </script> </body>

 

##python后端路由視圖函數代碼:

def qqq(request):
        file_path = "c:aa.txt"
        with open(file_path,"ab") as f:
            for line in request.FILES.get("file_data"):
                f.write(line)

 

歡迎來摟~~~

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM