浏览器文件分段断点上传
这次给大家带来浏览器文件分段断点上传，浏览器文件分段断点上传的注意事项有哪些，下面就是实战案例，一起来看一下。
后端使用 Python Flask
前端原理实现:
1.获取文件特征码
2.截取文件信息和对文件分段
3.校验服务器是否存在同样特征码的没上传完的文件
4.如过有同样特征码文件获取上传进度
5.否则进度从0开始
6.循环异步按顺序上传分段文件
7.如果上传完成提示成功
后端原理实现:
接收request(文件hash)参数
判断文件是否是中断上传的
如果存在hash文件夹获取文件夹下文件段数量返回给前端
不存在返回0或空字符串5.如果前端返回上传的文件段,则保存文件段并给文件段标识索引
如果上传完成合并文件,删除文件段
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-Type
success: 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,osimport urllib.parse,mimeimport shutilfrom werkzeug.routing import BaseConverterclass RegexConverter(BaseConverter):
def init(self, map, *args):
self.map = map
self.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(): #输出url
passif name == 'main':
app.debug = True
app.run()示例就这么多,但实际问题上没那么简单,比如上传校验前可以先获取服务器中已经存在的同一特征码和大小的文件,然后直接复制文件到上传的目录或提示是否覆盖等等。当然你还可以优化比如上传分段后再上传时在进行分片然后对片执行同时上传之类的。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
Atas ialah kandungan terperinci 浏览器文件分段断点上传. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1658
14
1415
52
1309
25
1257
29
1231
24
Apakah sebab mengapa penyemak imbas tidak bertindak balas selepas pelayan WebSocket mengembalikan 401? Bagaimana menyelesaikannya?
Apr 19, 2025 pm 02:21 PM
Kaedah tidak responsif penyemak imbas selepas pelayan WebSocket mengembalikan 401. Apabila menggunakan Netty untuk membangunkan pelayan WebSocket, anda sering menghadapi keperluan untuk mengesahkan token. � ...
Cara Mendaftar Akaun mengenai Tutorial Pendaftaran Exchange Ouyi Exchange Ouyi
Apr 24, 2025 pm 02:06 PM
Langkah -langkah untuk mendaftarkan akaun OUYI adalah seperti berikut: 1. Sediakan e -mel atau nombor telefon bimbit yang sah dan menstabilkan rangkaian. 2. Lawati laman web rasmi Ouyi. 3. Masukkan halaman pendaftaran. 4. Pilih e -mel atau nombor telefon bimbit untuk mendaftar dan isi maklumat. 5. Dapatkan dan isi kod pengesahan. 6. Setuju dengan Perjanjian Pengguna. 7. Pendaftaran lengkap dan log masuk, menjalankan KYC dan menubuhkan langkah keselamatan.
Binance muat turun pautan Binance muat turun jalan
Apr 24, 2025 pm 02:12 PM
Untuk memuat turun aplikasi Binance dengan selamat, anda perlu melalui saluran rasmi: 1. Lawati laman web rasmi Binance, 2. Cari dan klik portal muat turun aplikasi, 3.
Kenapa JavaScript secara langsung tidak dapat mendapatkan maklumat perkakasan secara langsung di komputer pengguna?
Apr 19, 2025 pm 08:15 PM
Perbincangan mengenai sebab -sebab mengapa JavaScript tidak dapat memperoleh maklumat perkakasan komputer pengguna dalam pengaturcaraan harian, banyak pemaju akan ingin tahu tentang mengapa JavaScript tidak dapat diperoleh secara langsung ...
Bagaimana cara menjana dan memaparkan applet WeChat dengan betul dengan kod QR parameter di Java?
Apr 19, 2025 pm 04:48 PM
Menjana kod QR Applet WeChat dengan parameter di Java dan memaparkannya pada halaman HTML adalah keperluan umum. Artikel ini akan membincangkan secara terperinci cara menggunakan ...
Apa yang perlu dilakukan jika alamat pemindahan USDT tidak betul? Panduan untuk pemula
Apr 21, 2025 pm 12:12 PM
Selepas alamat pemindahan USDT tidak betul, mula -mula mengesahkan bahawa pemindahan telah berlaku, dan kemudian mengambil langkah -langkah mengikut jenis ralat. 1. Sahkan pemindahan: Lihat sejarah transaksi, dapatkan dan tanya nilai hash transaksi pada pelayar blockchain. 2. Ambil langkah: Jika alamat tidak wujud, tunggu dana untuk dikembalikan atau hubungi perkhidmatan pelanggan; Jika ia adalah alamat yang tidak sah, hubungi perkhidmatan pelanggan dan dapatkan bantuan profesional; Jika ia dipindahkan ke orang lain, cuba hubungi penerima atau mendapatkan bantuan undang -undang.
Muat turun laman web rasmi aplikasi Exchange Ouyi untuk telefon bimbit Apple
Apr 28, 2025 pm 06:57 PM
Aplikasi Exchange OUYI menyokong memuat turun telefon bimbit Apple, lawati laman web rasmi, klik pilihan "Apple Mobile", dapatkan dan pasang di App Store, daftar atau log masuk untuk menjalankan perdagangan cryptocurrency.
Bolehkah JWT melaksanakan perubahan kebenaran dinamik? Apakah perbezaan dari mekanisme sesi?
Apr 19, 2025 pm 06:12 PM
Kekeliruan dan jawapan mengenai JWT dan sesi Banyak pemula sering keliru tentang sifat dan senario mereka yang terpakai ketika belajar JWT dan sesi. Artikel ini akan berputar di sekitar J ...
