浏览器文件分段断点上传简单示例(python 篇)

后端使用 Python Flask

前端原理实现:

1.获取文件特征码
2.截取文件信息和对文件分段
3.校验服务器是否存在同样特征码的没上传完的文件
4.如过有同样特征码文件获取上传进度
5.否则进度从0开始
6.循环异步按顺序上传分段文件
7.如果上传完成提示成功

后端原理实现:

1.接收request(文件hash)参数
2.判断文件是否是中断上传的
3.如果存在hash文件夹获取文件夹下文件段数量返回给前端
4.不存在返回0或空字符串

5.如果前端返回上传的文件段,则保存文件段并给文件段标识索引
6.如果上传完成合并文件,删除文件段

html代码

代码以单个文件上传为例,使用hashMe.js获取特征码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script><script type="text/javascript" src="md5.js"></script><script src="hashme.js"></script>
</head><body><input type="file" onchange="hhh(this.files[0])" /><button onclick="uploadCk()">测试</button><script>var up_f;//需要上传的信息var fileSplitSize = 1024 * 1024 * 2; //以2MB为一个分片function hhh(f) {　if (true) { //假设这是判断文件大小var hash = new hashMe(f, function(msg) {up_f = new Object();up_f.hash = msg;up_f.name = f.name;up_f.size = f.size;up_f.shardCount = Math.ceil(f.size / fileSplitSize); //总片数up_f.shard = [];//文件段for (var i = 0; i < up_f.shardCount; i++) {var start = i * fileSplitSize;var end = Math.min(f.size, start + fileSplitSize);up_f.shard[up_f.shard.length] = f.slice(start, end);//保存分段}});}}function uploadCk() { //上传前检查 $.ajax({url: "/upload_ck",type: "get",data: {hash: up_f.hash},success: function(data) {if (data != "") {upload(Number(data));//调用上传(索引为服务器存在的文件段索引)} else { upload(0);//调用上传}}});}function upload(loadIndex) { //上传var form = new FormData();form.append("hash", up_f.hash);form.append("name", up_f.name);form.append("size", up_f.size);form.append("shardCount", up_f.shardCount);form.append("blob", up_f.shard[loadIndex]);form.append("sdIndex", loadIndex);console.log("sdIndex:" + loadIndex + ",shardCount:" + up_f.shardCount)$.ajax({url: "/upload",type: "POST",data: form,async: true, processData: false, //很重要，告诉jquery不要对form进行处理contentType: false, //很重要，指定为false才能形成正确的Content-Typesuccess: function(data) {data = Number(data) + 1;if (data <= up_f.shardCount) {console.log("data:" + data);upload(data);} else {console.log("上传完毕");}}});}</script>
</body>
</html>

Python代码

为示例写的Python代码有些不规范大家尽量不要模仿我这种写法(mime下载)

from flask import Flask, url_for,request
import codecs,re,os
import urllib.parse,mime
import shutil
from werkzeug.routing import BaseConverter
class RegexConverter(BaseConverter):def __init__(self, map, *args):self.map = mapself.regex = args[0]app = Flask(__name__)
mim=mime.types
app.config['UPLOAD_FOLDER'] = 'uploads/'#保存文件位置app.url_map.converters['regex'] = RegexConverter
@app.route('/<regex(".*"):url>')
def index(url):ps=urllib.parse.unquote(url)   if ps=="upload":return upload()elif ps.split('?')[0]=="upload_ck":if os.path.exists("./"+app.config['UPLOAD_FOLDER']+str(request.args.get('hash') ) ):return str(len( os.listdir("./"+app.config['UPLOAD_FOLDER']+str(request.args.get('hash') )) )-1 )#返回文件段索引else:return ""bt=codecs.open(ps,'rb',"utf-8").read() return  bt, 200, {'Content-Type': mim[url.split(".")[-1]]}@app.route('/upload', methods=['POST'])
def upload():hashtxt=request.form['hash']sPs="./"+app.config['UPLOAD_FOLDER']+hashtxt+"/"if not os.path.exists(sPs):#文件夹不存在os.makedirs(sPs)#创建hash文件夹uploaded_files = request.files.getlist("blob")#获取文件流集filePs=hashtxt+"/"+request.form['name']+".part"+request.form['sdIndex'] #文件段保存路径for file in uploaded_files:  file.save(os.path.join(app.config['UPLOAD_FOLDER'],filePs ))#保存文件if (int(request.form['shardCount']))==(int(request.form['sdIndex'])):#判断上传完最后一个文件mergeFile(app.config['UPLOAD_FOLDER'],request.form['name'],hashtxt);#合并文件shutil.rmtree("./"+app.config['UPLOAD_FOLDER']+hashtxt)#删除return request.form['sdIndex']#返回段索引def mergeFile(ps,nm,hs):#合并文件temp = open(ps+"/"+nm,'wb')#创建新文件count=len(os.listdir(ps+"/"+hs))for i in range(0,count):  fp = open(ps+"/"+hs+"/"+nm+".part"+str(i), 'rb')#以二进制读取分割文件temp.write(fp.read())#写入读取数据fp.close()  temp.close()with app.test_request_context():    #输出urlpass
if __name__ == '__main__': app.debug = Trueapp.run()

示例就这么多,但实际问题上没那么简单,比如上传校验前可以先获取服务器中已经存在的同一特征码和大小的文件,然后直接复制文件到上传的目录或提示是否覆盖等等。当然你还可以优化比如上传分段后再上传时在进行分片然后对片执行同时上传之类的。

浏览器文件分段断点上传简单示例(python 篇)相关推荐

多维标度法(MDS,Multidimensional Scaling)及普氏分析(Procrustes Analysis)在人体姿态关节点上的简单示例(python)
多维标度法(MDS,Multidimensional Scaling) 多维标度法一个简单的应用示例就是,已知一组城市之间的相对距离关系(相似矩阵),如何求解出各个城市在地图上的位置,使其尽可能满足前 ...
关于分片上传 php,php分片上传简单示例
这篇文章主要为大家详细介绍了php分片上传简单示例,具有一定的参考价值,可以用来参考一下. 对php分片上传简单示例感兴趣的小伙伴,下面一起跟随512笔记的小编巴闭妹来看看吧! /** * * @pa ...
01 ftp上传简单示例服务端
import json import socket import structserver = socket.socket() server.bind(('127.0.0.1',8001)) serv ...
java web 断点上传_使用WebUploader实现分片断点上传文件功能（二）
写在前面: 这几天,有去研究一下WebUploader上传文件,前面的博客有记录下使用WebUploader简单上传文件的例子,今天就把分片断点上传的例子也记录下吧,在博客园中,也查看了一些资料,基本 ...
安卓okhttp连接mysql_android中okhttp实现断点上传示例
前言之前项目需要上传大文件的功能,上传大文件经常遇到上传一半由于网络或者其他一些原因上传失败.然后又得重新上传(很麻烦),所以就想能不能做个断点上传的功能.于是网上搜索,发现市面上很少有断点上传的案 ...
Akka实战：HTTP大文件断点上传、下载，秒传
2019独角兽企业重金招聘Python工程师标准>>> 访问:https://github.com/yangbajing/scala-applications/tree/master ...
php dropzone.js中文教程,使用Dropzone.js上传的示例代码
本文介绍了使用Dropzone.js上传的示例代码,分享给大家,具体如下: 说明:后台用的python的flask框架,后台对你理解这篇文章没什么影响,你可以使用php form作为上传区引入Dro ...
dropzone.js应用java_使用Dropzone.js上传的示例代码
本文介绍了使用Dropzone.js上传的示例代码,分享给大家,具体如下: 说明:后台用的python的flask框架,后台对你理解这篇文章没什么影响,你可以使用php form作为上传区引入Dro ...
分析腾讯QQ网页文件断点上传
关于文件的断点上传,网上的很多例子,有好有坏吧.最失望的是,在知网下载了十篇论文,感觉都是在瞎扯淡,目测是大学生的毕业设计吧,反正很失望. 主要是剖析了腾讯邮箱的文件上传,发现和我自己实现的大致相同, ...
php实现ftp上传,PHP_PHP实现ftp上传文件示例，FTP上传是PHP实现的一个常见且 - phpStudy...
PHP实现ftp上传文件示例 FTP上传是PHP实现的一个常见且非常重要的应用技巧,今天就来与大家分享一下PHP实现FTP上传文件的简单示例.希望对大家的PHP学习能带来一定的帮助. 主要代码如下: ...