js大檔案分塊上傳與tornado接收檔案和下載
阿新 • • 發佈：2018-12-16
將檔案分塊上傳使用的是HTML5的功能（IE可能不支援）
<div class="layui-container"> <input type="file" id="file" multiple required> <br> <div class="layui-progress layui-progress-big" lay-filter="demo"> <div class="layui-progress-bar layui-bg-green"></div> </div> <br> <button class="layui-btn btnFile">立即提交</button> <script type="text/javascript"> var element = layui.element; var time = new Date().getTime(); var upload = function (file, num) { var formData = new FormData(); var blockSize = 1024 * 1024 * 2; var blockNum = Math.ceil(file.size / blockSize); var nextSize = Math.min(num * blockSize, file.size); var fileData = file.slice((num - 1) * blockSize, nextSize); formData.append("file", fileData); formData.append("fileName", file.name); $.ajax({ url: "", type: "POST", data: formData, processData: false, contentType: false, success: function (responseText) { element.progress('demo', ((num * 100) / blockNum) + '%'); if (file.size <= nextSize) { layer.msg("上傳成功"); return; } upload(file, ++num);//遞迴呼叫 } }); }; $(".btnFile").click(function () { var file = $("#file")[0].files[0]; upload(file, 1); }); </script> </div>
tornado接收
#!/usr/bin/env python # -*- coding: UTF-8 -*- import tornado.ioloop import tornado.web import os class UploadFileHandler(tornado.web.RequestHandler): def get(self): self.write(''' <html> <head><title>Upload File</title></head> <body> <form action='file' enctype="multipart/form-data" method='post'> <input type='file' name='file'/><br/> <input type='submit' value='submit'/> </form> </body> </html> ''') def post(self): #檔案的暫存路徑 upload_path=os.path.join(os.path.dirname(__file__),'files') #提取表單中‘name’為‘file’的檔案元資料 file_metas=self.request.files['file'] for meta in file_metas: filename=meta['filename'] filepath=os.path.join(upload_path,filename) #有些檔案需要已二進位制的形式儲存，實際中可以更改 with open(filepath,'wb') as up: up.write(meta['body']) self.write('finished!') app=tornado.web.Application([ (r'/file',UploadFileHandler), ]) if __name__ == '__main__': app.listen(3000) tornado.ioloop.IOLoop.instance().start()
在js中構建表單發起下載檔案請求
tornado中響應如下：
def post(self,filename): print('i download file handler : ',filename) #Content-Type這裡我寫的時候是固定的了，也可以根據實際情況傳值進來 self.set_header ('Content-Type', 'application/octet-stream') dispositionName='attachment; filename='+filename #因為檔名可能有中文，會出現問題 dispositionName.encode() self.set_header ('Content-Disposition', dispositionName) #讀取的模式需要根據實際情況進行修改 buff = 1024 * 1024 * 2 with open(filename, 'rb') as f: while True: data = f.read(buff) if not data: break self.write(data) #記得有finish哦 self.finish()