上传文件
一、自定义上传文件
1 from flask import Flask,request 2 from datetime import datetime 3 import random 4 app = Flask(__name__) 5 6 @app.route(\'/upload\',methods=[\'POST\']) 7 def upload(): 8 data = request.files.get(\'pic\') 9 # 随机图片名称 10 pic=datetime.now().strftime(\'%Y%m%d%H%M%S\')+str(random.randint(1000,9999))+\'.png\' 11 with open(pic,\'wb\') as f: 12 f.write(data.read()) 13 return \'\' 14 15 if __name__ == \'__main__\': 16 app.run(debug=True)
<form action=\'http://127.0.0.1:5000/upload\' method=\'post\' enctype="multipart/form-data"> <input type=\'file\' name=\'pic\' /> <input type=\'submit\' value=\'submit\' /> </form>
二、第三方上传文件 （webuploader）
1 # server.py 2 # 引入os模块，1，删除分片，节约物理空间,2，遍历上传的文件 3 import os 4 from flask import Flask, request, Response, render_template,jsonify 5 app = Flask(__name__) 6 app.config.from_object(\'config\') 7 8 # 进入上传页面 9 @app.route(\'/\') 10 def index(): 11 return render_template(\'uploads.html\') 12 13 # 检查上传分片是否重复，如果重复则不提交，否则提交 14 @app.route(\'/checkChunk\', methods=[\'POST\']) 15 def checkChunk(): 16 chunkSize = request.form.get(\'chunkSize\') # 待上传文件的大小 17 if chunkSize == \'0\': 18 return jsonify({\'ifExist\': True}) # 不要上传 19 file_name = request.form.get(\'fileMd5\')+ request.form.get(\'chunk\') 20 if file_name not in get_deep_catalog(): 21 return jsonify({\'ifExist\': False}) 22 return jsonify({\'ifExist\':True}) 23 24 # 定义一个获取当前路径下的所有文件,应该放在公共函数库中 25 def get_deep_catalog(path=\'./upload\'): 26 result = [] 27 list_catalog = os.listdir(path) 28 for i in list_catalog: 29 if os.path.isdir(i) == True: 30 get_deep_catalog(i) 31 else: 32 result.append(i) 33 return result 34 35 # 将每次上传的分片合并成一个新文件 36 @app.route(\'/mergeChunks\', methods=[\'POST\']) 37 def mergeChunks(): 38 fileName=request.form.get(\'fileName\') # 上传的文件名 39 md5=request.form.get(\'fileMd5\') 40 chunk = 0 # 分片序号 41 with open(u\'./upload/{}\'.format(fileName), \'wb\') as target_file: # 创建新文件 42 while True: 43 try: 44 filename = \'./upload/{}-{}\'.format(md5, chunk) 45 source_file = open(filename, \'rb\') # 按序打开每个分片 46 target_file.write(source_file.read()) # 读取分片内容写入新文件 47 source_file.close() 48 except Exception as e: 49 break 50 chunk += 1 51 os.remove(filename) # 删除该分片，节约空间 52 return jsonify({\'upload\':True,\'fileName\':fileName}) 53 54 55 # 前端上传的分片 保存到 指定的目录下 ./upload 56 @app.route(\'/upload\', methods=[\'POST\']) 57 def upload(): # 接收前端上传的一个分片 58 md5=request.form.get(\'fileMd5\') 59 chunk_id=request.form.get(\'chunk\',0,type=int) 60 filename = \'{}-{}\'.format(md5,chunk_id) 61 upload_file = request.files[\'file\'] 62 upload_file.save(\'./upload/{}\'.format(filename)) 63 return jsonify({\'upload_part\':True}) 64 65 66 # 遍历 upload下的上传文件 67 @app.route(\'/file/list\', methods=[\'GET\']) 68 def file_list(): 69 files = os.listdir(\'./upload/\') # 获取文件目录 70 return render_template(\'list.html\', files=files) 71 72 # 文件下载 73 @app.route(\'/file/download/<filename>\', methods=[\'GET\']) 74 def file_download(filename): 75 def send_chunk(): # 流式读取 76 store_path = \'./upload/%s\' % filename 77 with open(store_path, \'rb\') as target_file: 78 while True: 79 chunk = target_file.read(20 * 1024 * 1024) 80 if not chunk: 81 break 82 yield chunk 83 # application/octet-stream 是二进制文件的数据流或者字节数组 84 return Response(send_chunk(), content_type=\'application/octet-stream\') 85 86 if __name__ == \'__main__\': 87 app.run(debug=True)
1 <!-- 2 上传页面 uploads.html 3 extensions : 上传数据类型 例如 mp4 4 mimeTypes : 媒体资源类型，如 .mp4 5 --> 6 <!DOCTYPE html> 7 <html> 8 <head> 9 <meta charset="UTF-8"> 10 <title>webuploader上传</title> 11 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/webuploader/0.1.1/webuploader.css"> 12 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> 13 <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script> 14 <script src="/static/js/webuploader.min.js"></script> 15 <script type="text/javascript" src="/static/js/hashmap.js"></script> 16 <style type="text/css"> 17 #picker { 18 display: inline-block; 19 line-height: 1.428571429; 20 vertical-align: middle; 21 margin: 0 12px 0 0; 22 } 23 </style> 24 </head> 25 <body> 26 <div id="uploader" class="container"> 27 <!--用来存放文件信息--> 28 <div id="thelist" class="row"> 29 <div class="panel panel-primary"> 30 <div class="panel-heading">webuploader文件上传</div> 31 <table class="table table-striped table-bordered" id="uploadTable"> 32 <thead> 33 <tr> 34 <th>序号</th> 35 <th>文件名称</th> 36 <th>文件大小</th> 37 <th>上传状态</th> 38 <th>上传进度</th> 39 <th>操作</th> 40 </tr> 41 </thead> 42 <tbody></tbody> 43 </table> 44 <div class="panel-footer"> 45 <div id="picker">选择文件</div> 46 <button id="btn" class="btn btn-default">开始上传</button> 47 </div> 48 </div> 49 </div> 50 </div> 51 <script type="text/javascript"> 52 var fileMd5; 53 var fileSuffix; 54 var $list=$("#thelist table>tbody"); 55 var state = \'pending\';//初始按钮状态 56 var $btn=$("#btn"); 57 var count=0; 58 var map=new HashMap(); 59 //监听分块上传过程中的三个时间点 60 WebUploader.Uploader.register({ 61 "before-send-file" : "beforeSendFile", 62 "before-send" : "beforeSend", 63 "after-send-file" : "afterSendFile", 64 }, { 65 //时间点1：所有分块进行上传之前调用此函数 66 beforeSendFile : function(file) { 67 var deferred = WebUploader.Deferred(); 68 //1、计算文件的唯一标记，用于断点续传 69 // (new WebUploader.Uploader()).md5File(file, 0, 10 * 1024 * 1024) 70 (new WebUploader.Uploader()).md5File(file, 0, 1024) 71 .progress(function(percentage) { 72 $(\'#\' + file.id).find("td.state").text("正在读取文件信息..."); 73 }).then(function(val) { 74 fileMd5 = val; 75 $(\'#\' + file.id).find("td.state").text("成功获取文件信息..."); 76 //获取文件信息后进入下一步 77 deferred.resolve(); 78 }); 79 return deferred.promise(); 80 }, 81 //时间点2：如果有分块上传，则每个分块上传之前调用此函数 82 beforeSend : function(block) { 83 var deferred = WebUploader.Deferred(); 84 85 $.ajax({ 86 type : "POST", 87 url : "{% raw %}{{url_for(\'.checkChunk\')}}{% endraw %}", 88 data : { 89 //文件唯一标记 90 fileMd5 : fileMd5, 91 //当前分块下标 92 chunk : block.chunk, 93 //当前分块大小 94 chunkSize : block.end - block.start 95 }, 96 dataType : "json", 97 success : function(response) { 98 if (response.ifExist) { 99 //分块存在，跳过 100 deferred.reject(); 101 } else { 102 //分块不存在或不完整，重新发送该分块内容 103 deferred.resolve(); 104 } 105 } 106 }); 107 108 this.owner.options.formData.fileMd5 = fileMd5; 109 deferred.resolve(); 110 return deferred.promise(); 111 }, 112 //时间点3：所有分块上传成功后调用此函数 113 afterSendFile : function() { 114 //如果分块上传成功，则通知后台合并分块 115 $.ajax({ 116 type : "POST", 117 url : "{% raw %}{{url_for(\'.mergeChunks\')}}{% endraw %}", 118 data : { 119 fileMd5 : fileMd5, 120 fileSuffix:fileSuffix, 121 fileName:fileName, 122 }, 123 success : function(response) { 124 console.log(response.fileName+" 上传成功") 125 // alert("上传成功"); 126 } 127 }); 128 } 129 }); 130 131 var uploader = WebUploader 132 .create({ 133 // swf文件路径 134 swf : \'https://cdnjs.cloudflare.com/ajax/libs/webuploader/0.1.1/Uploader.swf\', 135 // 文件接收服务端。 136 server : \'{% raw %}{{ url_for("upload") }}{% endraw %}\', 137 // 选择文件的按钮。可选。 138 // 内部根据当前运行是创建，可能是input元素，也可能是flash. 139 pick : { 140 id : \'#picker\',//这个id是你要点击上传文件的id 141 multiple : true 142 }, 143 // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！ 144 resize : true, 145 auto : false, 146 //开启分片上传 147 chunked : true, 148 chunkSize : 10 * 1024 * 1024, 149 150 accept : { 151 extensions : "txt,jpg,jpeg,bmp,png,zip,rar,war,pdf,cebx,doc,docx,ppt,pptx,xls,xlsx,iso,flv,mp4", 152 mimeTypes : \'.txt,.jpg,.jpeg,.bmp,.png,.zip,.rar,.war,.pdf,.cebx,.doc,.docx,.ppt,.pptx,.xls,.xlsx,.iso,.flv,.mp4\' 153 } 154 155 }); 156 157 // 当有文件被添加进队列的时候 158 uploader.on(\'fileQueued\', function(file) { 159 //保存文件扩展名 160 fileSuffix=file.ext; 161 fileName=file.source[\'name\']; 162 var fileSize=file.size; 163 var fileSizeStr=""; 164 fileSizeStr=WebUploader.Base.formatSize(fileSize); 165 count++; 166 $list.append( 167 \'<tr id="\' + file.id + \'" class="item" flag=0>\'+ 168 \'<td class="index">\' + count + \'</td>\'+ 169 \'<td class="info">\' + file.name + \'</td>\'+ 170 \'<td class="size">\' + fileSizeStr + \'</td>\'+ 171 \'<td class="state">等待上传...</td>\'+ 172 \'<td class="percentage"></td>\'+ 173 \'<td class="operate"><button name="upload" class="btn btn-warning">开始</button><button name="delete" class="btn btn-error">删除</button></td></tr>\'); 174 map.put(file.id+"",file); 175 }); 176 177 // 文件上传过程中创建进度条实时显示。 178 uploader.on(\'uploadProgress\', function(file, percentage) { 179 $(\'#\' + file.id).find(\'td.percentage\').text( 180 \'上传中 \' + Math.round(percentage * 100) + \'%\'); 181 }); 182 183 uploader.on(\'uploadSuccess\', function(file) { 184 $(\'#\' + file.id).find(\'td.state\').text(\'已上传\'); 185 }); 186 187 uploader.on(\'uploadError\', function(file) { 188 $(\'#\' + file.id).find(\'td.state\').text(\'上传出错\'); 189 }); 190 191 uploader.on(\'uploadComplete\', function(file) { 192 uploader.removeFile(file); 193 }); 194 195 196 uploader.on(\'all\', function(type) { 197 if (type === \'startUpload\') { 198 state = \'uploading\'; 199 } else if (type === \'stopUpload\') { 200 state = \'paused\'; 201 } else if (type === \'uploadFinished\') { 202 state = \'done\'; 203 } 204 205 if (state === \'uploading\') { 206 $btn.text(\'暂停上传\'); 207 } else { 208 $btn.text(\'开始上传\'); 209 } 210 }); 211 212 $btn.on(\'click\', function(){ 213 if (state === \'uploading\'){ 214 uploader.stop(true); 215 } else { 216 uploader.upload(); 217 } 218 }); 219 220 $("body").on("click","#uploadTable button[name=\'upload\']",function(){ 221 flag=$(this).parents("tr.item").attr("flag")^1; 222 $(this).parents("tr.item").attr("flag",flag); 223 var id=$(this).parents("tr.item").attr("id"); 224 if(flag==1){ 225 $(this).text("暂停"); 226 uploader.upload(uploader.getFile(id,true)); 227 228 }else{ 229 $(this).text("开始"); 230 //uploader.stop(true); 231 uploader.stop(uploader.getFile(id,true)); 232 //uploader.skipFile(file); 233 //uploader.removeFile(file); 234 //uploader.getFile(id,true); 235 } 236 }); 237 238 $("body").on("click","#uploadTable button[name=\'delete\']",function(){ 239 var id=$(this).parents("tr.item").attr("id"); 240 $(this).parents("tr.item").remove(); 241 uploader.removeFile(uploader.getFile(id,true)); 242 map.remove(id); 243 }); 244 </script> 245 </body> 246 </html>
1 <!-- 2 list.html 3 --> 4 <!DOCTYPE html> 5 <html lang="zh-CN"> 6 <head> 7 <meta charset="utf-8"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 9 <meta name="viewport" content="width=device-width, initial-scale=1"> 10 <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> 11 <title>Bootstrap 101 Template</title> 12 13 <!-- Bootstrap --> 14 <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> 15 16 <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --> 17 <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> 18 <!--[if lt IE 9]> 19 <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> 20 <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> 21 <![endif]--> 22 <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> 23 <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> 24 <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> 25 <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> 26 </head> 27 <body> 28 <div class="container-fluid"> 29 <div class="table-responsive col-md-6 col-md-offset-3"> 30 <table class="table"> 31 <tr> 32 <td class="active">序号</td> 33 <td class="active">文件</td> 34 </tr> 35 {% raw %}{% for file in files %} 36 <tr> 37 <td class="active">{{ files.index(file)+1 }}</td> 38 <td class="active">{{file}}</td> 39 </tr> 40 {% endfor %}{% endraw %} 41 </table> 42 </div> 43 </div> 44 </body> 45 </html>