Heim > Artikel > Web-Frontend > Hochladen segmentierter Haltepunkte für Browserdateien
Hochladen segmentierter Haltepunkte für Browserdateien
- php中世界最好的语言Original
- 2018-03-10 15:52:262401Durchsuche
Dieses Mal werde ich Ihnen den segmentierten Haltepunkt-Upload von Browserdateien vorstellen. Was sind die Vorsichtsmaßnahmen für den segmentierten Haltepunkt-Upload von Browserdateien?
Das Backend verwendet Python FlaskFront-End-Prinzip-Implementierung:1 Dateisignaturen abrufen und Dateien segmentieren3. Überprüfen Sie, ob noch nicht abgeschlossene hochgeladene Dateien mit derselben Signatur auf dem Server vorhanden sind
4. Wenn Dateien mit derselben Signatur vorhanden sind, erhalten Sie den Upload-Fortschritt
5. Andernfalls beginnt der Fortschritt bei 0
6. Schleife asynchroner Upload in der Reihenfolge Segmentierte Datei
7. Wenn der Upload abgeschlossen ist, ist die Eingabeaufforderung erfolgreich
Implementierung des Backend-Prinzips:
Anforderungsparameter (Datei-Hash) empfangen
Stellen Sie fest, ob das Hochladen der Datei unterbrochen wurde
Wenn der Hash-Ordner vorhanden ist, ermitteln Sie die Anzahl der Dateisegmente unter dem Ordner und geben Sie ihn an das Frontend zurück
Wenn er nicht vorhanden ist, geben Sie 0 oder leer zurückString
5. Wenn das Frontend das hochgeladene Dateisegment zurückgibt, speichern Sie das Dateisegment und geben Sie den Dateisegment-Identifikationsindex an Wenn der Upload abgeschlossen ist und die Datei zusammenführt, löschen Sie das Dateisegment
HTML-Code
Der Code verwendet als Beispiel einen einzelnen
Datei-Upload. Verwenden Sie hashMe.js, um die Signatur zu erhalten
Python-Code<!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>Der für das Beispiel geschriebene Python-Code ist etwas unregelmäßig. Versuchen Sie bitte, meinen Schreibstil nicht zu imitieren (Mime-Download)
Es gibt so viele Beispiele, aber das eigentliche Problem ist nicht so einfach Beispielsweise können Sie vor dem Hochladen zur Überprüfung zunächst die Datei mit derselben Signatur und Größe abrufen, die bereits auf dem Server vorhanden ist, und die Datei dann direkt in das hochgeladene Verzeichnis kopieren oder nachfragen, ob Abdeckung usw. vorliegt. Natürlich können Sie auch optimieren, indem Sie beispielsweise Segmente hochladen und diese dann in Segmente hochladen und dann gleichzeitig die Segmente hochladen.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()Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Verwandte Lektüre:
Das obige ist der detaillierte Inhalt vonHochladen segmentierter Haltepunkte für Browserdateien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!