Browser file segmented breakpoint upload
This time I will bring you the segmented breakpoint upload of browser files. What are the precautions for uploading browser files with segmented breakpoints? The following is a practical case, let's take a look.
The backend uses Python FlaskFront-end principle implementation:1. Obtain the file feature code2. Intercept file information and segment the file
3 .Verify whether there are unfinished uploaded files with the same feature code on the server
4. If there are files with the same feature code, get the upload progress
5. Otherwise, the progress starts from 0
6. Upload asynchronously and sequentially in a loop Segmented file
7. If the upload is completed, the prompt is successful
If it does not exist, return 0 or empty
String 5. If the front end returns the uploaded file segment, save it File segment and identify the index for the file segment
file upload as an example , use hashMe.js to obtain the feature 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>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()Website using nodejs for introduction
Assignment and Symbol of ES6 objects
How to create a 1px border effect on the mobile terminal
The above is the detailed content of Browser file segmented breakpoint upload. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1655
14
1413
52
1306
25
1252
29
1225
24
How to register an account on Ouyi Exchange Ouyi Exchange Registration Tutorial
Apr 24, 2025 pm 02:06 PM
The steps to register an Ouyi account are as follows: 1. Prepare a valid email or mobile phone number and stabilize the network. 2. Visit Ouyi’s official website. 3. Enter the registration page. 4. Select email or mobile phone number to register and fill in the information. 5. Obtain and fill in the verification code. 6. Agree to the user agreement. 7. Complete registration and log in, carry out KYC and set up security measures.
What is the reason why the browser does not respond after the WebSocket server returns 401? How to solve it?
Apr 19, 2025 pm 02:21 PM
The browser's unresponsive method after the WebSocket server returns 401. When using Netty to develop a WebSocket server, you often encounter the need to verify the token. �...
How to correctly generate and display the WeChat applet with parameters QR codes in Java?
Apr 19, 2025 pm 04:48 PM
Generating a WeChat applet QR code with parameters in Java and displaying it on an HTML page is a common requirement. This article will discuss in detail how to use J...
Can JWT implement dynamic permission changes? What is the difference from the Session mechanism?
Apr 19, 2025 pm 06:12 PM
Confusion and answers about JWT and Session Many beginners are often confused about their nature and applicable scenarios when learning JWT and Session. This article will revolve around J...
Why can't JavaScript directly obtain hardware information on the user's computer?
Apr 19, 2025 pm 08:15 PM
Discussion on the reasons why JavaScript cannot obtain user computer hardware information In daily programming, many developers will be curious about why JavaScript cannot be directly obtained...
Binance download link Binance download path
Apr 24, 2025 pm 02:12 PM
To safely download the Binance APP, you need to go through the official channels: 1. Visit the Binance official website, 2. Find and click the APP download portal, 3. Choose to scan the QR code, app store, or directly download the APK file to download to ensure that the link and developer information are authentic, and enable two-factor verification to protect the security of the account.
What to do if the USDT transfer address is incorrect? Guide for beginners
Apr 21, 2025 pm 12:12 PM
After the USDT transfer address is incorrect, first confirm that the transfer has occurred, and then take measures according to the error type. 1. Confirm the transfer: view the transaction history, obtain and query the transaction hash value on the blockchain browser. 2. Take measures: If the address does not exist, wait for the funds to be returned or contact customer service; if it is an invalid address, contact customer service and seek professional help; if it is transferred to someone else, try to contact the payee or seek legal help.
What is on-chain transaction? What are the global transactions?
Apr 22, 2025 am 10:06 AM
EU MiCA compliance certification, covering 50 fiat currency channels, cold storage ratio 95%, and zero security incident records. The US SEC licensed platform has convenient direct purchase of fiat currency, a ratio of 98% cold storage, institutional-level liquidity, supports large-scale OTC and custom orders, and multi-level clearing protection.
