\u5b9e\u73b0\u601d\u8def<\/h3>\n\n\n\n\n- \u5b9e\u73b0\u4e0a\u4f20\u529f\u80fd\u4ecd\u7136\u9700\u8981\u501f\u52a9 input \u7684 file \u5c5e\u6027\uff0c\u5e76\u9690\u85cf\u9690\u85cf\u5143\u7d20<\/li>\n\n\n\n
- \u4f7f\u7528 js \u624b\u52a8\u89e6\u53d1 input \u4e8b\u4ef6<\/li>\n\n\n\n
- \u7528 html \u5143\u7d20\u4f18\u5316\u4ee3\u66ff\u539f\u751f\u7684 input \u7684\u6837\u5f0f<\/li>\n<\/ul>\n\n\n\n
\u4f18\u5316\u7ed3\u679c<\/h3>\n\n\n\n![\"\"\/](\"data:image\/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+\")
<\/div><\/figure>\n\n\n\n\u5b9e\u73b0\u4ee3\u7801<\/h3>\n\n\n\nhtml<\/h4>\n\n\n\n <div class=\"container\">
<div class=\"buttonContainer\">
<input type=\"file\" id=\"inputInput\" style=\"display:none\">
<div class=\"button-select button\">\u9009\u62e9\u6587\u4ef6<\/div>
<div class=\"button-submit button\">\u4e0a\u4f20\u6587\u4ef6<\/div>
<\/div>
<div>\u6587\u4ef6\u4ec5\u652f\u6301png\u683c\u5f0f\u7684\u6587\u4ef6<\/div>
<div>
<ul id=\"list\"><\/ul>
<\/div>
<\/div><\/code><\/pre>\n\n\n\nHTML \u90e8\u5206\u7684\u6837\u5f0f\u5185\u5bb9\u5ffd\u7565\uff0c\u4f46\u5176\u4e2d\u7684\u6280\u672f\u70b9\u5728\u4e8e \u9690\u85cf\u4e86 input \u5143\u7d20<\/strong> \uff0c\u7528 div \u6a21\u62df\u4e86\u9009\u62e9\u6587\u4ef6\u548c\u4e0a\u4f20\u6587\u4ef6\u6309\u94ae<\/p>\n\n\n\njavaScript<\/h4>\n\n\n\nlet inputInput = document.querySelector(\"#inputInput\")
let select = document.querySelector(\".button-select\")
let submit = document.querySelector(\".button-submit\")
let list = document.querySelector(\"#list\")
let filesData;
\u200b
\/\/ \u83b7\u53d6\u672c\u5730\u6587\u4ef6
inputInput.onchange=()=>{
let files = inputInput.files[0]
console.log(files)
if(files.type !== \"image\/png\"){
alert(\"\u6587\u4ef6\u53ea\u652f\u6301png\u683c\u5f0f\")
return
}
if(files.size>2*1024*1024){
alert(\"\u6587\u4ef6\u6700\u5927\u652f\u63012MB\")
return
}
filesData = files
list.innerHTML = `
<li>${files.name} <span class=\"del\">\u79fb\u9664<\/span><\/li>
`
}
\/\/ \u65f6\u95f4\u59d4\u6258
list.onclick = (event)=>{
if(event.target.innerHTML === \"\u79fb\u9664\"){
list.innerHTML = \"\";
filesData = null
}
}
\/\/ \u89e6\u53d1\u4e0a\u4f20\u7684click\u4e8b\u4ef6
select.onclick = ()=>{
inputInput.click()
}
\/\/ \u63d0\u4ea4
submit.onclick = ()=>{
if(filesData){
let formData = new FormData();
formData.append(\"files\",filesData)
fetch(\"www.baidu.com\",{
method:\"POST\",
body:formData
}).then((response)=>{
console.log(response)
})
}
}<\/code><\/pre>\n\n\n\n\u4e0a\u9762\u7684 javascript \u4ee3\u7801\uff0c \u83b7\u53d6\u201c\u9009\u62e9\u6587\u4ef6\u201d select \uff0c\u5728 select \u70b9\u51fb\u7684\u65f6\u5019\u89e6\u53d1 input \u7684\u70b9\u51fb\u4e8b\u4ef6\uff0c\u5f39\u51fa\u6587\u4ef6\u9009\u62e9\u5668\uff1b \u7ed1\u5b9a input \u7684 change \u4e8b\u4ef6 \u76d1\u542c\u9009\u4e2d\u7684\u6587\u4ef6\u5bf9\u8c61\uff0c \u901a\u8fc7 files \u5c5e\u6027\u83b7\u53d6\u5bf9\u8c61\u5168\u90e8\u4fe1\u606f\u5e76\u4f5c\u76f8\u5e94\u7684\u4e1a\u52a1\u5224\u65ad\uff0c\u6bd4\u5982 \u6587\u4ef6\u7c7b\u578b\u3001\u6587\u4ef6\u5927\u5c0f\u3001\u6587\u4ef6\u4e0a\u4f20\u5217\u8868\u7b49\u3002\u901a\u8fc7\u70b9\u51fb submit \u5143\u7d20\u624b\u52a8\u521b\u5efa formData \u5b9e\u4f8b \u5c06\u6587\u4ef6\u5143\u7d20\u6dfb\u52a0\u8fdb\u53bb\uff0c\u4f20\u7ed9\u540e\u7aef<\/p>\n\n\n\n
\n\n\n\n\u5355\u4e00\u6587\u4ef6\u4e0a\u4f20BASE64<\/h2>\n\n\n\n
\u5355\u4e00\u6587\u4ef6\u4e0a\u4f20\u5c06\u6587\u4ef6\u8f6c\u4e3a base64\u7f16\u7801 \uff0c \u4e3b\u8981\u501f\u52a9 FileReader \u5b9e\u4f8b\u5bf9\u8c61\uff0c\u8be5\u5bf9\u8c61\u4e0d\u4ec5\u53ef\u4ee5\u8f6c\u5316\u4e3a base64\uff0c\u8fd8\u652f\u6301 readAsArrayBuffer \u7684\u8f6c\u6362\u3002<\/p>\n\n\n\n
\u5b9e\u73b0\u7ed3\u679c<\/h3>\n\n\n\n<\/div><\/figure>\n\n\n\n\u4ee5\u4e0a\u4ee3\u7801\u7684\u5b9e\u73b0\u5f62\u5f0f\uff0c\u70b9\u51fb \u9009\u62e9\u6587\u4ef6 \u6309\u94ae\uff0c\u9009\u62e9\u6587\u4ef6\u540e\u81ea\u52a8\u4e0a\u4f20\u3002<\/p>\n\n\n\n
\u5b9e\u73b0\u65b9\u5f0f<\/h3>\n\n\n\nhtml<\/h4>\n\n\n\n <div class=\"container\">
<div class=\"buttonContainer\">
<input type=\"file\" id=\"inputInput\">
<div class=\"button-select button\">\u9009\u62e9\u6587\u4ef6<\/div>
<\/div>
<div>\u6587\u4ef6\u4ec5\u652f\u6301png\u683c\u5f0f\u7684\u6587\u4ef6<\/div>
<\/div><\/code><\/pre>\n\n\n\njavascript<\/h4>\n\n\n\nlet inputInput = document.querySelector(\"#inputInput\")
let select = document.querySelector(\".button-select\")
\u200b
let fileReader =(files)=>{
return new Promise((resolve,reject)=>{
let fileReader = new FileReader();
fileReader.readAsDataURL(files)
fileReader.onload=(event)=>{
resolve(event.target.result)
}
})
}
\/\/ \u83b7\u53d6\u672c\u5730\u6587\u4ef6
inputInput.onchange=async ()=>{
let files = inputInput.files[0]
if(files.size>2*1024*1024){
alert(\"\u6587\u4ef6\u6700\u5927\u652f\u63012MB\")
return
}
let base64 = await fileReader(files)
fetch(\"http:\/\/www.baidu.com\",{
method:\"POST\",
headers:{
'Content-Type': 'application\/x-www-form-urlencoded'
},
body:JSON.stringify({
files:base64,
filesName:files.name
})
})
}
\/\/ \u89e6\u53d1\u4e0a\u4f20\u7684click\u4e8b\u4ef6
select.onclick = ()=>{
inputInput.click()
}<\/code><\/pre>\n\n\n\n\u5b9e\u73b0\u81ea\u52a8\u4e0a\u4f20\u7684\u903b\u8f91\uff0c\u4e3b\u8981\u662f\u76d1\u542c input file \u7684 change \u4e8b\u4ef6\uff0c\u5728 change \u4e8b\u4ef6\u4e2d\u76f4\u63a5\u5904\u7406\u56fe\u7247\u4e3a base64 \u7f16\u7801\uff0c\u7136\u540e\u8bf7\u6c42\u540e\u53f0\u63a5\u53e3\u3002<\/p>\n\n\n\n
\u503c\u5f97\u6ce8\u610f\u7684\u662f FileReader \u7684\u5b9e\u4f8b\u4e3a\u5f02\u6b65\u65b9\u6cd5\uff0c\u6240\u4ee5\u4e0a\u9762\u4ee3\u7801\u5bf9 FileReacer \u505a\u4e86 Promise \u7684\u5c01\u88c5\uff0c\u81f3\u4e8e\u4e0d\u4e86\u89e3 Promise \u7684\u5c0f\u4f19\u4f34\u8bf7\u81ea\u884c\u767e\u5ea6\u77e5\u8bc6\u76f2\u533a\u3002<\/p>\n\n\n\n
\n\n\n\n\u6587\u4ef6\u4e0a\u4f20\u7f29\u7565\u56fe<\/h2>\n\n\n\n
\u501f\u52a9 base64 \u7f16\u7801 \u5b9e\u73b0\u6587\u4ef6\u7f29\u7565\u56fe\u6548\u679c<\/p>\n\n\n\n
\u5b9e\u73b0\u7ed3\u679c<\/h3>\n\n\n\n<\/div><\/figure>\n\n\n\n\u5b9e\u73b0\u903b\u8f91<\/h3>\n\n\n\n
\u5c06\u6587\u4ef6 \u7f16\u7801\u4e3abase64\uff0c\u590d\u5236\u7ed9 img \u5143\u7d20<\/p>\n\n\n\n
html<\/h4>\n\n\n\n <div class=\"container\">
<div class=\"buttonContainer\">
<input type=\"file\" id=\"inputInput\">
<div class=\"button-select button\">\u9009\u62e9\u6587\u4ef6<\/div>
<div class=\"button-submit button\">\u4e0a\u4f20\u6587\u4ef6<\/div>
<\/div>
<div>
<img src=\"\" alt=\"\" id=\"img\">
<\/div>
<\/div><\/code><\/pre>\n\n\n\njavascript<\/h4>\n\n\n\nlet inputInput = document.querySelector(\"#inputInput\")
let select = document.querySelector(\".button-select\")
let submit = document.querySelector(\".button-submit\")
let img = document.querySelector(\"#img\")
let filesData;
\u200b
\/\/ \u5c06\u6587\u4ef6\u8f6c\u6210base64
const toBase64 = (files)=>{
return new Promise((resolve,reject)=>{
let fileReader = new FileReader();
fileReader.readAsDataURL(files)
fileReader.onload=(event)=>{
resolve(event.target.result)
}
})
}
\u200b
\/\/ \u83b7\u53d6\u672c\u5730\u6587\u4ef6
inputInput.onchange=async ()=>{
let files = inputInput.files[0]
console.log(files)
if(files.size>2*1024*1024){
alert(\"\u6587\u4ef6\u6700\u5927\u652f\u63012MB\")
return
}
filesData = files;
let base64 = await toBase64(files);
console.log(\"base64\",base64)
img.src = base64
}
\/\/ \u89e6\u53d1\u4e0a\u4f20\u7684click\u4e8b\u4ef6
select.onclick = ()=>{
inputInput.click()
}
\/\/ \u63d0\u4ea4
submit.onclick = ()=>{
if(filesData){
let formData = new FormData();
formData.append(\"files\",filesData)
fetch(\"www.baidu.com\",{
method:\"POST\",
body:formData
}).then((response)=>{
console.log(response)
})
}
}<\/code><\/pre>\n\n\n\n
\n\n\n\n\u6587\u4ef6\u4e0a\u4f20\u8fdb\u5ea6\u7ba1\u63a7<\/h2>\n\n\n\n
\u4f7f\u7528 axios \u6216\u8005 \u539f\u751f XHR \u53d1\u8d77\u63a5\u53e3\u8bf7\u6c42\uff0c\u5176\u4e2d\u8fd9\u4e24\u4e2a\u5b9e\u4f8b\u4e2d\u63d0\u4f9b\u4e86 onUploadProgress \u5c5e\u6027\uff0c onUploadProgress \u4e3a\u4e00\u4e2a\u56de\u8c03\u51fd\u6570\uff0c\u76d1\u542c\u4e0a\u4f20\u72b6\u6001 \u5176\u4e2d loaded \u4e3a\u5f53\u524d\u4e0a\u4f20\u7684\u6570\u91cf\uff0ctotal \u4e3a\u6587\u4ef6\u603b\u91cf\u3002<\/p>\n\n\n\n
\u503c\u5f97\u6ce8\u610f\u7684\u662f\u65b0\u7684 fetch \u8bf7\u6c42\u65b9\u5f0f\uff0c\u65e0\u6cd5\u76d1\u542c\u6587\u4ef6\u4e0a\u4f20\u548c\u4e0b\u8f7d\u8fdb\u5ea6\u72b6\u6001<\/p>\n\n\n\n
\u5b9e\u73b0\u7ed3\u679c<\/h3>\n\n\n\n<\/div><\/figure>\n\n\n\n\u5b9e\u73b0\u65b9\u5f0f<\/h3>\n\n\n\nhtml<\/h4>\n\n\n\n <div class=\"container\">
<div class=\"buttonContainer\">
<input type=\"file\" id=\"inputInput\">
<div class=\"button-select button\">\u9009\u62e9\u6587\u4ef6<\/div>
<div class=\"button-submit button\">\u4e0a\u4f20\u6587\u4ef6<\/div>
<\/div>
<div>\u6587\u4ef6\u4ec5\u652f\u6301png\u683c\u5f0f\u7684\u6587\u4ef6<\/div>
<div class=\"progress\">
<div class=\"progressBar\" style=\"width: 10%;\"><\/div>
<\/div>
<\/div><\/code><\/pre>\n\n\n\njavascript<\/h4>\n\n\n\nlet inputInput = document.querySelector(\"#inputInput\")
let select = document.querySelector(\".button-select\")
let submit = document.querySelector(\".button-submit\")
let progressBar = document.querySelector(\".progressBar\")
let filesData;
\u200b
\u200b
\/\/ \u83b7\u53d6\u672c\u5730\u6587\u4ef6
inputInput.onchange=()=>{
let files = inputInput.files[0]
console.log(files)
if(files.type !== \"text\/plain\"){
alert(\"\u6587\u4ef6\u53ea\u652f\u6301text\u683c\u5f0f\")
return
}
if(files.size>2*1024*1024){
alert(\"\u6587\u4ef6\u6700\u5927\u652f\u63012MB\")
return
}
filesData = files
}
\/\/ \u89e6\u53d1\u4e0a\u4f20\u7684click\u4e8b\u4ef6
select.onclick = ()=>{
inputInput.click()
}
\/\/ \u63d0\u4ea4
submit.onclick = ()=>{
if(filesData){
let formData = new FormData();
formData.append(\"files\",filesData)
axios({
method:\"POST\",
url:\"https:\/\/jsonplaceholder.typicode.com\/posts\/\",
data:formData,
onUploadProgress:(ev)=>{
let {loaded,total} = ev;
progressBar.style.width = `${loaded\/total*100}%`
}
}).then((response)=>{
console.log(response)
})
}
}<\/code><\/pre>\n\n\n\n
\n\n\n\n\u591a\u6587\u4ef6\u4e0a\u4f20\u53ca\u8fdb\u5ea6\u7ba1\u63a7<\/h2>\n\n\n\n
\u540c\u5355\u6587\u4ef6\u5b9e\u73b0\u601d\u8def\u4e00\u6837\uff0c\u591a\u6587\u4ef6\u4e0a\u4f20\u9488\u5bf9\u6bcf\u4e2a\u6587\u4ef6\u8fdb\u884c\u8fdb\u5ea6\u7ba1\u63a7\u7684\u65b9\u6848\u5728\u4e8e\uff0c\u6bcf\u4e00\u4e2a\u6587\u4ef6\u90fd\u4f1a\u5355\u72ec\u8bf7\u6c42\u4e00\u6b21\u63a5\u53e3\u3002<\/p>\n\n\n\n
\u4f18\u70b9\uff1a\u53ef\u4ee5\u5bf9\u6bcf\u4e00\u4e2a\u6587\u4ef6\u8fdb\u884c\u7ba1\u63a7\uff0c\u5e76\u4e14\u4f1a\u964d\u4f4e\u6587\u4ef6\u4e0a\u4f20\u5230\u5bb9\u91cf<\/p>\n\n\n\n
\u7f3a\u70b9\uff1a\u4f1a\u91cd\u590d\u591a\u6b21\u7684\u8c03\u7528\u4e00\u4e2a\u63a5\u53e3\uff0c\u5bf9\u63a5\u53e3\u548c\u670d\u52a1\u5668\u9020\u6210\u7684\u538b\u529b\u8f83\u5927<\/p>\n\n\n\n
\u9488\u5bf9\u4e8e\u5408\u5e76\u591a\u6587\u4ef6\u8bf7\u6c42\u7684\u65b9\u5f0f\u4e4b\u524d\u5728 element \u6a21\u5757\u4e2d\u300a\u6587\u4ef6\u4e0a\u4f20\u300b\u4e2d\u603b\u7ed3\u8fc7 \u5b9e\u73b0\u7684\u65b9\u6cd5\uff0c \u611f\u5174\u8da3\u7684\u5c0f\u4f19\u4f34\u53ef\u4ee5\u79fb\u6b65\u53bb\u53e6\u4e00\u7bc7\u6587\u7ae0<\/p>\n\n\n\n
\u5b9e\u73b0\u7ed3\u679c\uff1a<\/h3>\n\n\n\n<\/div><\/figure>\n\n\n\n\u5b9e\u73b0\u65b9\u5f0f<\/h3>\n\n\n\nhtml<\/h4>\n\n\n\n <div class=\"container\">
<div class=\"buttonContainer\">
<input type=\"file\" id=\"inputInput\" multiple>
<div class=\"button-select button\">\u9009\u62e9\u6587\u4ef6<\/div>
<div class=\"button-submit button\">\u4e0a\u4f20\u6587\u4ef6<\/div>
<\/div>
<div>\u6587\u4ef6\u4ec5\u652f\u6301png\u683c\u5f0f\u7684\u6587\u4ef6<\/div>
<div>
<ul id=\"list\">
<\/ul>
<\/div>
<\/div><\/code><\/pre>\n\n\n\njavascript<\/h4>\n\n\n\nlet inputInput = document.querySelector(\"#inputInput\")
let select = document.querySelector(\".button-select\")
let submit = document.querySelector(\".button-submit\")
let list = document.querySelector(\"#list\")
let filesData;
\u200b
\/\/ \u83b7\u53d6\u672c\u5730\u6587\u4ef6
inputInput.onchange=()=>{
filesData =Array.from(inputInput.files)
console.log(\"\u591a\u6587\u4ef6\u4e0a\u4f20\",filesData)
filesData.map((item)=>{
list.innerHTML+= `
<li>
${item.name}
<div class=\"progress\">
<div class=\"progressBar\" data-name=\"${item.name}\" style=\"width:10%\"><\/div>
<\/div>
<\/li>
`
})
}
\/\/ \u89e6\u53d1\u4e0a\u4f20\u7684click\u4e8b\u4ef6
select.onclick = ()=>{
inputInput.click()
}
\/\/ \u63d0\u4ea4
submit.onclick = ()=>{
console.log(filesData)
if(filesData.length){
filesData.map((item)=>{
let formData = new FormData();
formData.append(\"files\",item)
axios({
method:\"POST\",
url:\"https:\/\/jsonplaceholder.typicode.com\/posts\/\",
data:formData,
onUploadProgress:(ev)=>{
let el = document.querySelector(`div[data-name=\"${item.name}\"]`)
let {loaded,total} = ev;
el.style.width = `${loaded\/total*100}%`
}
}).then((response)=>{
console.log(response)
})
})
}
}<\/code><\/pre>\n\n\n\n\u4e0a\u9762 JS \u7684\u5b9e\u73b0\u903b\u8f91\u4e3a \u6bcf\u4e00\u4e2a li \u5143\u7d20\u7ed1\u5b9a\u552f\u4e00\u7684 \u81ea\u5b9a\u4e49\u5c5e\u6027\u76ee\u524d\u4ee5\u4e3a\u6587\u4ef6\u540d\u79f0\u4f5c\u4e3a\u552f\u4e00\u503c\uff0c\u5728\u8c03\u7528\u63a5\u53e3\u7684\u4e2d\u76d1\u542c onUploadProgress \u5229\u7528\u5f53\u524d\u7684 file \u5bf9\u8c61\u7684 name \u5c5e\u6027\uff0c\u627e\u5230\u76f8\u5bf9\u7684 DOM \u8282\u70b9\uff0c\u8ba1\u7b97\u8fdb\u5ea6\u5e76\u8d4b\u503c\u3002<\/p>\n\n\n\n
\n\n\n\n\u62d6\u62fd\u4e0a\u4f20<\/h2>\n\n\n\n
\u62d6\u62fd\u4e0a\u4f20\u7684\u5b9e\u73b0\u65b9\u5f0f \u4e3b\u8981\u4e8e\u501f\u52a9\u4e86 H5 \u7684API dragover \\ drop \u65b9\u6cd5\uff0c\u7528\u6765\u76d1\u542c\u5728\u6b64\u533a\u57df\u5185\u7684\u9f20\u6807\u79fb\u52a8\u548c\u653e\u4e0b\u4e8b\u4ef6\u3002<\/p>\n\n\n\n
\u5b9e\u73b0\u7ed3\u679c<\/h3>\n\n\n\n<\/div><\/figure>\n\n\n\n\u5b9e\u73b0\u65b9\u5f0f<\/h3>\n\n\n\nhtml<\/h4>\n\n\n\n <div class=\"container\" id=\"upWrapper\">
<div class=\"content\">
<img src=\".\/img\/\u4e0a\u4f20.png\" alt=\"\">\\
<\/div>
<\/div><\/code><\/pre>\n\n\n\njavascript<\/h4>\n\n\n\nlet upWrapper = document.querySelector(\"#upWrapper\")
\/\/ \u8fdb\u5165\u4e8b\u4ef6
upWrapper.addEventListener(\"dragover\",(event)=>{
event.preventDefault();
})
\/\/ \u653e\u7f6e\u4e8b\u4ef6
upWrapper.addEventListener(\"drop\",(event)=>{
event.preventDefault();
submit(event.dataTransfer.files)
})
\/\/ \u63d0\u4ea4\u4e8b\u4ef6
const submit = (filesData)=>{
let formData = new FormData();
formData.append(\"files\",filesData)
axios({
method:\"POST\",
url:\"https:\/\/jsonplaceholder.typicode.com\/posts\/\",
data:formData,
}).then((response)=>{
console.log(response)
})
}<\/code><\/pre>\n\n\n\n\u4e0a\u9762 js \u7684\u4e3b\u8981\u903b\u8f91\u4e3a\uff0c \u5728 drop \u4e8b\u4ef6\u4e2d\u83b7\u53d6 \u6587\u4ef6\u7684\u5c5e\u6027 event.dataTransfer.files \uff0c\u7136\u540e\u5c06\u6587\u4ef6\u5c5e\u6027\u4f20\u7ed9\u670d\u52a1\u7aef\u3002<\/p>\n\n\n\n
\n\n\n\n\u5927\u6587\u4ef6\u4e0a\u4f20\u548c\u65ad\u70b9\u7eed\u4f20<\/h2>\n\n\n\n
\u5728\u4e00\u4e9b\u4e1a\u52a1\u9700\u6c42\u4e2d\uff0c\u9700\u8981\u7528\u6237\u4e0a\u4f20\u4e00\u4e9b\u5927\u5bb9\u91cf\u89c6\u9891\uff0c\u8fd9\u65f6\u7528\u4f20\u7edf\u7684\u6587\u4ef6\u4e0a\u4f20\u65b9\u5f0f\u4f1a\u9020\u6210\u4f20\u8f93\u6548\u7387\u53d8\u6162\u7684\u95ee\u9898\u3002\u5728\u4e0a\u4f20\u6587\u4ef6\u8fc7\u7a0b\u4e2d\u4e00\u65e6\u51fa\u73b0\u4e0a\u4f20\u5931\u8d25\uff0c\u5c31\u9700\u8981\u91cd\u65b0\u5c06\u6587\u4ef6\u6574\u4e2a\u91cd\u65b0\u4e0a\u4f20\u4e00\u904d\u3002\u8fd9\u6837\u5728\u65e0\u8bba\u662f\u7528\u6237\u63d0\u4f53\u9a8c\u8fd8\u662f\u670d\u52a1\u7aef\u90fd\u662f\u4e00\u79cd\u65f6\u95f4\u548c\u8d44\u6e90\u7684\u6d6a\u8d39\u3002<\/p>\n\n\n\n
\u5728\u89c2\u5bdf\u4e00\u4e9b\u5b58\u50a8\u5927\u5382\uff0c\u6bd4\u5982\u4e03\u725b\u4e91\u3001\u767e\u5ea6\u4e91\u76d8\u7b49\u670d\u52a1\u5546\uff0c\u4ed6\u4eec\u5728\u4e0a\u4f20\u548c\u4e0b\u8f7d\u7684\u65f6\u5019\u4f1a\u628a\u6587\u4ef6\u788e\u7247\u5316\uff0c\u8fd9\u6837\u4e0d\u4ec5\u53ef\u4ee5\u5927\u5927\u63d0\u9ad8\u4f20\u8f93\u901f\u5ea6\uff0c\u4e14\u4e5f\u517c\u5bb9\u7684\u65ad\u7535\u7eed\u4f20\u7684\u529f\u80fd\uff0c\u5373\u6587\u4ef6\u4e0a\u4f20\u5931\u8d25\uff0c\u7cfb\u7edf\u5bf9\u81ea\u52a8\u68c0\u7d22\u5931\u8d25\u7684\u6587\u4ef6\u788e\u7247\uff0c\u7b49\u5f85\u7528\u6237\u91cd\u65b0\u4e0a\u4f20\u8be5\u6587\u4ef6\u65f6\u4f1a\u81ea\u52a8\u771f\u7504\u522b\u5931\u8d25\u7684\u6587\u4ef6\u788e\u7247\u8fdb\u884c\u4e0a\u4f20\u3002<\/p>\n\n\n\n
\u4e0b\u9762\u5c31\u4ecb\u7ecd\u4e0b\u524d\u7aef\u662f\u5982\u4f55\u5b9e\u73b0\u5927\u6587\u4ef6\u4e0a\u4f20\u548c\u65ad\u70b9\u7eed\u4f20\u7684<\/p>\n\n\n\n<\/div><\/figure>\n\n\n\n\u5b9e\u73b0\u7684\u6280\u672f\u70b9<\/h3>\n\n\n\n\n- \u9700\u8981\u501f\u52a9 FileReader \u5b9e\u4f8b\u5bf9\u8c61\u8fdb\u884c Budder \u7684\u8f6c\u6362<\/li>\n\n\n\n
- \u9700\u8981\u4f7f\u7528\u7b2c\u4e09\u653e Spark-md5 \u6765\u751f\u6210HASH<\/li>\n\n\n\n
- \u9700\u8981\u4f7f\u7528\u6b63\u5219\u83b7\u53d6\u6587\u4ef6\u7684\u6269\u5c55\u540d\uff0c\u540e\u671f\u548c\u7ed3\u5408 HASH \u503c\u5408\u5e76\u6210\u4e00\u4e2a\u65b0\u7684\u6587\u4ef6\u540d\u79f0\uff08\u4e0a\u56fe\u6240\u793a\uff09<\/li>\n\n\n\n
- \u9700\u8981\u501f\u52a9 file \u5bf9\u8c61\u4e2d\u7684 slice \u65b9\u6cd5\u5bf9\u6587\u4ef6\u5207\u5272\uff1b\u4f7f\u7528\u65b9\u6cd5\u548c\u6570\u7ec4\u7684 slice \u53c2\u6570\u4e00\u81f4<\/li>\n<\/ul>\n\n\n\n
\u4ee3\u7801\u5b9e\u73b0<\/h3>\n\n\n\nHTML<\/h4>\n\n\n\n <div class=\"container\">
<div class=\"buttonContainer\">
<input type=\"file\" id=\"inputInput\">
<div class=\"button-select button\">\u9009\u62e9\u6587\u4ef6<\/div>
<div class=\"button-submit button\">\u4e0a\u4f20\u6587\u4ef6<\/div>
<\/div>
<div>\u6587\u4ef6\u4ec5\u652f\u6301png\u683c\u5f0f\u7684\u6587\u4ef6<\/div>
<div class=\"progress\">
<div class=\"progressBar\" style=\"width: 10%;\"><\/div>
<\/div>
<\/div><\/code><\/pre>\n\n\n\njavascript<\/h4>\n\n\n\nlet inputInput = document.querySelector(\"#inputInput\")
let select = document.querySelector(\".button-select\")
let submit = document.querySelector(\".button-submit\")
let progressBar = document.querySelector(\".progressBar\")
let chunks=[]; \/\/ \u5207\u7247\u7684\u96c6\u5408
\u200b
\/\/ \u751f\u6210\u6587\u4ef6Buffer\u7684\u5c01\u88c5
const changeBuffer = (file)=>{
return new Promise((resolve)=>{
let fileReader = new FileReader();
fileReader.readAsArrayBuffer(file);
fileReader.onload = (event)=>{
\/\/ \u6839\u636e\u6587\u4ef6\u5185\u5bb9\u751f\u6210HASH\u503c
let bufferData = event.target.result;
let spark = new SparkMD5.ArrayBuffer();
let HASH; \/\/ \u6587\u4ef6\u7684Hash\u540d
let suffix; \/\/\u83b7\u53d6\u6587\u4ef6\u540e\u7f00\u540d
spark.append(bufferData);
HASH = spark.end();
suffix = file.name.replace(\/.+\\.\/, \"\");
resolve({
bufferData,
HASH,
suffix,
fileName:`${HASH}.${suffix}`
})
}
})
}
\u200b
\/\/ \u83b7\u53d6\u672c\u5730\u6587\u4ef6
inputInput.onchange= async ()=>{
let files = inputInput.files[0]
let {HASH,suffix,bufferData,fileName} = await changeBuffer(files);
let section = []; \/\/\u6587\u4ef6\u5207\u7247\u4e0a\u4f20\u7684\u8bb0\u5f55
\/*\u6587\u4ef6\u5207\u7247\u5904\u7406(\u4ee5\u56fa\u5b9a\u5927\u5c0f\u4e0a\u4f20\u4f18\u5148,\u5982\u679c\u5207\u7247\u6570\u91cf\u8fc7\u5927,\u5c31\u91c7\u7528\u56fa\u5b9a\u6570\u91cf)*\/
let max = 1024*100 \/\/ \u6bcf\u4e2a\u6587\u4ef6\u6700\u5927\u5728100KB
let count = Math.ceil(files.size \/ max); \/\/ \u4e00\u5171\u8981\u6709\u591a\u5c11\u5207\u7247
\/*\u8d85\u8fc7100\u4e2a\u5207\u7247,\u5c31\u91c7\u7528\u56fa\u5b9a\u6570\u91cf\u65b9\u5f0f\u4e0a\u4f20*\/
if(count>100){
max = files.size \/ 100;
count = 100;
}
for(let index=0;index<count;index++){
chunks.push({
file:files.slice(index*max,max*(index+1)),
fileName:`${HASH}_${index+1}.${suffix}`
})
}
}
\u200b
\/\/ \u89e6\u53d1\u4e0a\u4f20\u7684click\u4e8b\u4ef6
select.onclick = ()=>{
inputInput.click()
}
\u200b
\/\/ \u63d0\u4ea4
submit.onclick = ()=>{
\/\/ \u4e0a\u4f20\u6210\u529f\u7684\u5904\u7406
let ChunkState = [];
const upSuccess = (state)=>{
ChunkState.push(state);
\/\/ \u5224\u65ad\u662f\u5426\u5168\u90e8\u4e3atrue
let ChunkStateEvery = ChunkState.every((item)=>{return item==true})
if(chunks.length === ChunkState.length){
if(ChunkStateEvery){
\/\/ \u8c03\u7528\u540e\u53f0\u63a5\u53e3 \u901a\u77e5\u670d\u52a1\u5668\u53ef\u4ee5\u5bf9\u6587\u4ef6\u8fdb\u884c\u5408\u5e76
\/\/...
alter(\"\u6587\u4ef6\u4e0a\u4f20\u6210\u529f\")
}else{
alter(\"\u6587\u4ef6\u4e0a\u4f20\u51fa\u9519\u6210\u91cd\u65b0\u4e0a\u4f20\")
}
}
\/\/ \u66f4\u65b0\u8fdb\u5ea6\u6761
progressBar.style.width = `${count(ChunkState,true)\/chunks.length*100}%`
}
\/\/ \u5faa\u73af\u5207\u7247\u96c6\u5408\u9010\u4e2a\u8bf7\u6c42
chunks.map((item)=>{
let formData = new FormData();
formData.append(\"files\",item.file)
formData.append(\"fileName\",item.fileName)
axios({
method:\"POST\",
url:\"https:\/\/jsonplaceholder.typicode.com\/posts\/\",
data:formData,
}).then((response)=>{
if(response.code == 200){
upSuccess(true);
}
}).catch(()=>{
upSuccess(false);
})
})
}
\u200b
\/\/ \u7b97\u6cd5\u5c01\u88c5\u67e5\u627e\u6570\u7ec4\u4e2d\u67d0\u4e2a\u5143\u7d20\u51fa\u73b0\u7684\u6b21\u6570
const count = (arr, item)=>{
var count = 0;
arr.forEach((e)=> item === e ? count++:0);
return count;
}<\/code><\/pre>\n\n\n\n
\n\n\n\n\u5927\u6587\u4ef6\u5207\u7247\u4e0a\u4f20\u524d\u540e\u7aef\u6574\u4f53\u5b9e\u73b0\u903b\u8f91<\/h2>\n\n\n\n
\u6574\u4f53\u6d41\u7a0b\u53ef\u53c2\u8003\u4e0a\u65b9\u6d41\u7a0b\u56fe\uff0c\u6587\u4ef6\u91c7\u53d6 steam \u6d41\u65b9\u5f0f\u4f20\u9012\u7ed9\u540e\u7aef<\/p>\n\n\n\n
\u4f18\u5316\u7ed3\u679c<\/h3>\n\n\n\n<\/div><\/figure>\n\n\n\n\u5b9e\u73b0\u4ee3\u7801<\/h3>\n\n\n\nhtml<\/h4>\n\n\n\n <div class=\"container\">
<div class=\"buttonContainer\">
<input type=\"file\" id=\"inputInput\" style=\"display:none\">
<div class=\"button-select button\">\u9009\u62e9\u6587\u4ef6<\/div>
<div class=\"button-submit button\">\u4e0a\u4f20\u6587\u4ef6<\/div>
<\/div>
<div>\u6587\u4ef6\u4ec5\u652f\u6301png\u683c\u5f0f\u7684\u6587\u4ef6<\/div>
<div>
<ul id=\"list\"><\/ul>
<\/div>
<\/div><\/code><\/pre>\n\n\n\nHTML \u90e8\u5206\u7684\u6837\u5f0f\u5185\u5bb9\u5ffd\u7565\uff0c\u4f46\u5176\u4e2d\u7684\u6280\u672f\u70b9\u5728\u4e8e \u9690\u85cf\u4e86 input \u5143\u7d20<\/strong> \uff0c\u7528 div \u6a21\u62df\u4e86\u9009\u62e9\u6587\u4ef6\u548c\u4e0a\u4f20\u6587\u4ef6\u6309\u94ae<\/p>\n\n\n\njavaScript<\/h4>\n\n\n\nlet inputInput = document.querySelector(\"#inputInput\")
let select = document.querySelector(\".button-select\")
let submit = document.querySelector(\".button-submit\")
let list = document.querySelector(\"#list\")
let filesData;
\u200b
\/\/ \u83b7\u53d6\u672c\u5730\u6587\u4ef6
inputInput.onchange=()=>{
let files = inputInput.files[0]
console.log(files)
if(files.type !== \"image\/png\"){
alert(\"\u6587\u4ef6\u53ea\u652f\u6301png\u683c\u5f0f\")
return
}
if(files.size>2*1024*1024){
alert(\"\u6587\u4ef6\u6700\u5927\u652f\u63012MB\")
return
}
filesData = files
list.innerHTML = `
<li>${files.name} <span class=\"del\">\u79fb\u9664<\/span><\/li>
`
}
\/\/ \u65f6\u95f4\u59d4\u6258
list.onclick = (event)=>{
if(event.target.innerHTML === \"\u79fb\u9664\"){
list.innerHTML = \"\";
filesData = null
}
}
\/\/ \u89e6\u53d1\u4e0a\u4f20\u7684click\u4e8b\u4ef6
select.onclick = ()=>{
inputInput.click()
}
\/\/ \u63d0\u4ea4
submit.onclick = ()=>{
if(filesData){
let formData = new FormData();
formData.append(\"files\",filesData)
fetch(\"www.baidu.com\",{
method:\"POST\",
body:formData
}).then((response)=>{
console.log(response)
})
}
}<\/code><\/pre>\n\n\n\n\u4e0a\u9762\u7684 javascript \u4ee3\u7801\uff0c \u83b7\u53d6\u201c\u9009\u62e9\u6587\u4ef6\u201d select \uff0c\u5728 select \u70b9\u51fb\u7684\u65f6\u5019\u89e6\u53d1 input \u7684\u70b9\u51fb\u4e8b\u4ef6\uff0c\u5f39\u51fa\u6587\u4ef6\u9009\u62e9\u5668\uff1b \u7ed1\u5b9a input \u7684 change \u4e8b\u4ef6 \u76d1\u542c\u9009\u4e2d\u7684\u6587\u4ef6\u5bf9\u8c61\uff0c \u901a\u8fc7 files \u5c5e\u6027\u83b7\u53d6\u5bf9\u8c61\u5168\u90e8\u4fe1\u606f\u5e76\u4f5c\u76f8\u5e94\u7684\u4e1a\u52a1\u5224\u65ad\uff0c\u6bd4\u5982 \u6587\u4ef6\u7c7b\u578b\u3001\u6587\u4ef6\u5927\u5c0f\u3001\u6587\u4ef6\u4e0a\u4f20\u5217\u8868\u7b49\u3002\u901a\u8fc7\u70b9\u51fb submit \u5143\u7d20\u624b\u52a8\u521b\u5efa formData \u5b9e\u4f8b \u5c06\u6587\u4ef6\u5143\u7d20\u6dfb\u52a0\u8fdb\u53bb\uff0c\u4f20\u7ed9\u540e\u7aef<\/p>\n\n\n\n
\n\n\n\n\u5355\u4e00\u6587\u4ef6\u4e0a\u4f20BASE64<\/h2>\n\n\n\n
\u5355\u4e00\u6587\u4ef6\u4e0a\u4f20\u5c06\u6587\u4ef6\u8f6c\u4e3a base64\u7f16\u7801 \uff0c \u4e3b\u8981\u501f\u52a9 FileReader \u5b9e\u4f8b\u5bf9\u8c61\uff0c\u8be5\u5bf9\u8c61\u4e0d\u4ec5\u53ef\u4ee5\u8f6c\u5316\u4e3a base64\uff0c\u8fd8\u652f\u6301 readAsArrayBuffer \u7684\u8f6c\u6362\u3002<\/p>\n\n\n\n
\u5b9e\u73b0\u7ed3\u679c<\/h3>\n\n\n\n<\/div><\/figure>\n\n\n\n\u4ee5\u4e0a\u4ee3\u7801\u7684\u5b9e\u73b0\u5f62\u5f0f\uff0c\u70b9\u51fb \u9009\u62e9\u6587\u4ef6 \u6309\u94ae\uff0c\u9009\u62e9\u6587\u4ef6\u540e\u81ea\u52a8\u4e0a\u4f20\u3002<\/p>\n\n\n\n
\u5b9e\u73b0\u65b9\u5f0f<\/h3>\n\n\n\nhtml<\/h4>\n\n\n\n <div class=\"container\">
<div class=\"buttonContainer\">
<input type=\"file\" id=\"inputInput\">
<div class=\"button-select button\">\u9009\u62e9\u6587\u4ef6<\/div>
<\/div>
<div>\u6587\u4ef6\u4ec5\u652f\u6301png\u683c\u5f0f\u7684\u6587\u4ef6<\/div>
<\/div><\/code><\/pre>\n\n\n\njavascript<\/h4>\n\n\n\nlet inputInput = document.querySelector(\"#inputInput\")
let select = document.querySelector(\".button-select\")
\u200b
let fileReader =(files)=>{
return new Promise((resolve,reject)=>{
let fileReader = new FileReader();
fileReader.readAsDataURL(files)
fileReader.onload=(event)=>{
resolve(event.target.result)
}
})
}
\/\/ \u83b7\u53d6\u672c\u5730\u6587\u4ef6
inputInput.onchange=async ()=>{
let files = inputInput.files[0]
if(files.size>2*1024*1024){
alert(\"\u6587\u4ef6\u6700\u5927\u652f\u63012MB\")
return
}
let base64 = await fileReader(files)
fetch(\"http:\/\/www.baidu.com\",{
method:\"POST\",
headers:{
'Content-Type': 'application\/x-www-form-urlencoded'
},
body:JSON.stringify({
files:base64,
filesName:files.name
})
})
}
\/\/ \u89e6\u53d1\u4e0a\u4f20\u7684click\u4e8b\u4ef6
select.onclick = ()=>{
inputInput.click()
}<\/code><\/pre>\n\n\n\n\u5b9e\u73b0\u81ea\u52a8\u4e0a\u4f20\u7684\u903b\u8f91\uff0c\u4e3b\u8981\u662f\u76d1\u542c input file \u7684 change \u4e8b\u4ef6\uff0c\u5728 change \u4e8b\u4ef6\u4e2d\u76f4\u63a5\u5904\u7406\u56fe\u7247\u4e3a base64 \u7f16\u7801\uff0c\u7136\u540e\u8bf7\u6c42\u540e\u53f0\u63a5\u53e3\u3002<\/p>\n\n\n\n
\u503c\u5f97\u6ce8\u610f\u7684\u662f FileReader \u7684\u5b9e\u4f8b\u4e3a\u5f02\u6b65\u65b9\u6cd5\uff0c\u6240\u4ee5\u4e0a\u9762\u4ee3\u7801\u5bf9 FileReacer \u505a\u4e86 Promise \u7684\u5c01\u88c5\uff0c\u81f3\u4e8e\u4e0d\u4e86\u89e3 Promise \u7684\u5c0f\u4f19\u4f34\u8bf7\u81ea\u884c\u767e\u5ea6\u77e5\u8bc6\u76f2\u533a\u3002<\/p>\n\n\n\n
\n\n\n\n\u6587\u4ef6\u4e0a\u4f20\u7f29\u7565\u56fe<\/h2>\n\n\n\n
\u501f\u52a9 base64 \u7f16\u7801 \u5b9e\u73b0\u6587\u4ef6\u7f29\u7565\u56fe\u6548\u679c<\/p>\n\n\n\n
\u5b9e\u73b0\u7ed3\u679c<\/h3>\n\n\n\n<\/div><\/figure>\n\n\n\n\u5b9e\u73b0\u903b\u8f91<\/h3>\n\n\n\n
\u5c06\u6587\u4ef6 \u7f16\u7801\u4e3abase64\uff0c\u590d\u5236\u7ed9 img \u5143\u7d20<\/p>\n\n\n\n
html<\/h4>\n\n\n\n <div class=\"container\">
<div class=\"buttonContainer\">
<input type=\"file\" id=\"inputInput\">
<div class=\"button-select button\">\u9009\u62e9\u6587\u4ef6<\/div>
<div class=\"button-submit button\">\u4e0a\u4f20\u6587\u4ef6<\/div>
<\/div>
<div>
<img src=\"\" alt=\"\" id=\"img\">
<\/div>
<\/div><\/code><\/pre>\n\n\n\njavascript<\/h4>\n\n\n\nlet inputInput = document.querySelector(\"#inputInput\")
let select = document.querySelector(\".button-select\")
let submit = document.querySelector(\".button-submit\")
let img = document.querySelector(\"#img\")
let filesData;
\u200b
\/\/ \u5c06\u6587\u4ef6\u8f6c\u6210base64
const toBase64 = (files)=>{
return new Promise((resolve,reject)=>{
let fileReader = new FileReader();
fileReader.readAsDataURL(files)
fileReader.onload=(event)=>{
resolve(event.target.result)
}
})
}
\u200b
\/\/ \u83b7\u53d6\u672c\u5730\u6587\u4ef6
inputInput.onchange=async ()=>{
let files = inputInput.files[0]
console.log(files)
if(files.size>2*1024*1024){
alert(\"\u6587\u4ef6\u6700\u5927\u652f\u63012MB\")
return
}
filesData = files;
let base64 = await toBase64(files);
console.log(\"base64\",base64)
img.src = base64
}
\/\/ \u89e6\u53d1\u4e0a\u4f20\u7684click\u4e8b\u4ef6
select.onclick = ()=>{
inputInput.click()
}
\/\/ \u63d0\u4ea4
submit.onclick = ()=>{
if(filesData){
let formData = new FormData();
formData.append(\"files\",filesData)
fetch(\"www.baidu.com\",{
method:\"POST\",
body:formData
}).then((response)=>{
console.log(response)
})
}
}<\/code><\/pre>\n\n\n\n
\n\n\n\n\u6587\u4ef6\u4e0a\u4f20\u8fdb\u5ea6\u7ba1\u63a7<\/h2>\n\n\n\n
\u4f7f\u7528 axios \u6216\u8005 \u539f\u751f XHR \u53d1\u8d77\u63a5\u53e3\u8bf7\u6c42\uff0c\u5176\u4e2d\u8fd9\u4e24\u4e2a\u5b9e\u4f8b\u4e2d\u63d0\u4f9b\u4e86 onUploadProgress \u5c5e\u6027\uff0c onUploadProgress \u4e3a\u4e00\u4e2a\u56de\u8c03\u51fd\u6570\uff0c\u76d1\u542c\u4e0a\u4f20\u72b6\u6001 \u5176\u4e2d loaded \u4e3a\u5f53\u524d\u4e0a\u4f20\u7684\u6570\u91cf\uff0ctotal \u4e3a\u6587\u4ef6\u603b\u91cf\u3002<\/p>\n\n\n\n
\u503c\u5f97\u6ce8\u610f\u7684\u662f\u65b0\u7684 fetch \u8bf7\u6c42\u65b9\u5f0f\uff0c\u65e0\u6cd5\u76d1\u542c\u6587\u4ef6\u4e0a\u4f20\u548c\u4e0b\u8f7d\u8fdb\u5ea6\u72b6\u6001<\/p>\n\n\n\n
\u5b9e\u73b0\u7ed3\u679c<\/h3>\n\n\n\n<\/div><\/figure>\n\n\n\n\u5b9e\u73b0\u65b9\u5f0f<\/h3>\n\n\n\nhtml<\/h4>\n\n\n\n <div class=\"container\">
<div class=\"buttonContainer\">
<input type=\"file\" id=\"inputInput\">
<div class=\"button-select button\">\u9009\u62e9\u6587\u4ef6<\/div>
<div class=\"button-submit button\">\u4e0a\u4f20\u6587\u4ef6<\/div>
<\/div>
<div>\u6587\u4ef6\u4ec5\u652f\u6301png\u683c\u5f0f\u7684\u6587\u4ef6<\/div>
<div class=\"progress\">
<div class=\"progressBar\" style=\"width: 10%;\"><\/div>
<\/div>
<\/div><\/code><\/pre>\n\n\n\njavascript<\/h4>\n\n\n\nlet inputInput = document.querySelector(\"#inputInput\")
let select = document.querySelector(\".button-select\")
let submit = document.querySelector(\".button-submit\")
let progressBar = document.querySelector(\".progressBar\")
let filesData;
\u200b
\u200b
\/\/ \u83b7\u53d6\u672c\u5730\u6587\u4ef6
inputInput.onchange=()=>{
let files = inputInput.files[0]
console.log(files)
if(files.type !== \"text\/plain\"){
alert(\"\u6587\u4ef6\u53ea\u652f\u6301text\u683c\u5f0f\")
return
}
if(files.size>2*1024*1024){
alert(\"\u6587\u4ef6\u6700\u5927\u652f\u63012MB\")
return
}
filesData = files
}
\/\/ \u89e6\u53d1\u4e0a\u4f20\u7684click\u4e8b\u4ef6
select.onclick = ()=>{
inputInput.click()
}
\/\/ \u63d0\u4ea4
submit.onclick = ()=>{
if(filesData){
let formData = new FormData();
formData.append(\"files\",filesData)
axios({
method:\"POST\",
url:\"https:\/\/jsonplaceholder.typicode.com\/posts\/\",
data:formData,
onUploadProgress:(ev)=>{
let {loaded,total} = ev;
progressBar.style.width = `${loaded\/total*100}%`
}
}).then((response)=>{
console.log(response)
})
}
}<\/code><\/pre>\n\n\n\n
\n\n\n\n\u591a\u6587\u4ef6\u4e0a\u4f20\u53ca\u8fdb\u5ea6\u7ba1\u63a7<\/h2>\n\n\n\n
\u540c\u5355\u6587\u4ef6\u5b9e\u73b0\u601d\u8def\u4e00\u6837\uff0c\u591a\u6587\u4ef6\u4e0a\u4f20\u9488\u5bf9\u6bcf\u4e2a\u6587\u4ef6\u8fdb\u884c\u8fdb\u5ea6\u7ba1\u63a7\u7684\u65b9\u6848\u5728\u4e8e\uff0c\u6bcf\u4e00\u4e2a\u6587\u4ef6\u90fd\u4f1a\u5355\u72ec\u8bf7\u6c42\u4e00\u6b21\u63a5\u53e3\u3002<\/p>\n\n\n\n
\u4f18\u70b9\uff1a\u53ef\u4ee5\u5bf9\u6bcf\u4e00\u4e2a\u6587\u4ef6\u8fdb\u884c\u7ba1\u63a7\uff0c\u5e76\u4e14\u4f1a\u964d\u4f4e\u6587\u4ef6\u4e0a\u4f20\u5230\u5bb9\u91cf<\/p>\n\n\n\n
\u7f3a\u70b9\uff1a\u4f1a\u91cd\u590d\u591a\u6b21\u7684\u8c03\u7528\u4e00\u4e2a\u63a5\u53e3\uff0c\u5bf9\u63a5\u53e3\u548c\u670d\u52a1\u5668\u9020\u6210\u7684\u538b\u529b\u8f83\u5927<\/p>\n\n\n\n
\u9488\u5bf9\u4e8e\u5408\u5e76\u591a\u6587\u4ef6\u8bf7\u6c42\u7684\u65b9\u5f0f\u4e4b\u524d\u5728 element \u6a21\u5757\u4e2d\u300a\u6587\u4ef6\u4e0a\u4f20\u300b\u4e2d\u603b\u7ed3\u8fc7 \u5b9e\u73b0\u7684\u65b9\u6cd5\uff0c \u611f\u5174\u8da3\u7684\u5c0f\u4f19\u4f34\u53ef\u4ee5\u79fb\u6b65\u53bb\u53e6\u4e00\u7bc7\u6587\u7ae0<\/p>\n\n\n\n
\u5b9e\u73b0\u7ed3\u679c\uff1a<\/h3>\n\n\n\n<\/div><\/figure>\n\n\n\n\u5b9e\u73b0\u65b9\u5f0f<\/h3>\n\n\n\nhtml<\/h4>\n\n\n\n <div class=\"container\">
<div class=\"buttonContainer\">
<input type=\"file\" id=\"inputInput\" multiple>
<div class=\"button-select button\">\u9009\u62e9\u6587\u4ef6<\/div>
<div class=\"button-submit button\">\u4e0a\u4f20\u6587\u4ef6<\/div>
<\/div>
<div>\u6587\u4ef6\u4ec5\u652f\u6301png\u683c\u5f0f\u7684\u6587\u4ef6<\/div>
<div>
<ul id=\"list\">
<\/ul>
<\/div>
<\/div><\/code><\/pre>\n\n\n\njavascript<\/h4>\n\n\n\nlet inputInput = document.querySelector(\"#inputInput\")
let select = document.querySelector(\".button-select\")
let submit = document.querySelector(\".button-submit\")
let list = document.querySelector(\"#list\")
let filesData;
\u200b
\/\/ \u83b7\u53d6\u672c\u5730\u6587\u4ef6
inputInput.onchange=()=>{
filesData =Array.from(inputInput.files)
console.log(\"\u591a\u6587\u4ef6\u4e0a\u4f20\",filesData)
filesData.map((item)=>{
list.innerHTML+= `
<li>
${item.name}
<div class=\"progress\">
<div class=\"progressBar\" data-name=\"${item.name}\" style=\"width:10%\"><\/div>
<\/div>
<\/li>
`
})
}
\/\/ \u89e6\u53d1\u4e0a\u4f20\u7684click\u4e8b\u4ef6
select.onclick = ()=>{
inputInput.click()
}
\/\/ \u63d0\u4ea4
submit.onclick = ()=>{
console.log(filesData)
if(filesData.length){
filesData.map((item)=>{
let formData = new FormData();
formData.append(\"files\",item)
axios({
method:\"POST\",
url:\"https:\/\/jsonplaceholder.typicode.com\/posts\/\",
data:formData,
onUploadProgress:(ev)=>{
let el = document.querySelector(`div[data-name=\"${item.name}\"]`)
let {loaded,total} = ev;
el.style.width = `${loaded\/total*100}%`
}
}).then((response)=>{
console.log(response)
})
})
}
}<\/code><\/pre>\n\n\n\n\u4e0a\u9762 JS \u7684\u5b9e\u73b0\u903b\u8f91\u4e3a \u6bcf\u4e00\u4e2a li \u5143\u7d20\u7ed1\u5b9a\u552f\u4e00\u7684 \u81ea\u5b9a\u4e49\u5c5e\u6027\u76ee\u524d\u4ee5\u4e3a\u6587\u4ef6\u540d\u79f0\u4f5c\u4e3a\u552f\u4e00\u503c\uff0c\u5728\u8c03\u7528\u63a5\u53e3\u7684\u4e2d\u76d1\u542c onUploadProgress \u5229\u7528\u5f53\u524d\u7684 file \u5bf9\u8c61\u7684 name \u5c5e\u6027\uff0c\u627e\u5230\u76f8\u5bf9\u7684 DOM \u8282\u70b9\uff0c\u8ba1\u7b97\u8fdb\u5ea6\u5e76\u8d4b\u503c\u3002<\/p>\n\n\n\n
\n\n\n\n\u62d6\u62fd\u4e0a\u4f20<\/h2>\n\n\n\n
\u62d6\u62fd\u4e0a\u4f20\u7684\u5b9e\u73b0\u65b9\u5f0f \u4e3b\u8981\u4e8e\u501f\u52a9\u4e86 H5 \u7684API dragover \\ drop \u65b9\u6cd5\uff0c\u7528\u6765\u76d1\u542c\u5728\u6b64\u533a\u57df\u5185\u7684\u9f20\u6807\u79fb\u52a8\u548c\u653e\u4e0b\u4e8b\u4ef6\u3002<\/p>\n\n\n\n
\u5b9e\u73b0\u7ed3\u679c<\/h3>\n\n\n\n<\/div><\/figure>\n\n\n\n\u5b9e\u73b0\u65b9\u5f0f<\/h3>\n\n\n\nhtml<\/h4>\n\n\n\n <div class=\"container\" id=\"upWrapper\">
<div class=\"content\">
<img src=\".\/img\/\u4e0a\u4f20.png\" alt=\"\">\\
<\/div>
<\/div><\/code><\/pre>\n\n\n\njavascript<\/h4>\n\n\n\nlet upWrapper = document.querySelector(\"#upWrapper\")
\/\/ \u8fdb\u5165\u4e8b\u4ef6
upWrapper.addEventListener(\"dragover\",(event)=>{
event.preventDefault();
})
\/\/ \u653e\u7f6e\u4e8b\u4ef6
upWrapper.addEventListener(\"drop\",(event)=>{
event.preventDefault();
submit(event.dataTransfer.files)
})
\/\/ \u63d0\u4ea4\u4e8b\u4ef6
const submit = (filesData)=>{
let formData = new FormData();
formData.append(\"files\",filesData)
axios({
method:\"POST\",
url:\"https:\/\/jsonplaceholder.typicode.com\/posts\/\",
data:formData,
}).then((response)=>{
console.log(response)
})
}<\/code><\/pre>\n\n\n\n\u4e0a\u9762 js \u7684\u4e3b\u8981\u903b\u8f91\u4e3a\uff0c \u5728 drop \u4e8b\u4ef6\u4e2d\u83b7\u53d6 \u6587\u4ef6\u7684\u5c5e\u6027 event.dataTransfer.files \uff0c\u7136\u540e\u5c06\u6587\u4ef6\u5c5e\u6027\u4f20\u7ed9\u670d\u52a1\u7aef\u3002<\/p>\n\n\n\n
\n\n\n\n\u5927\u6587\u4ef6\u4e0a\u4f20\u548c\u65ad\u70b9\u7eed\u4f20<\/h2>\n\n\n\n
\u5728\u4e00\u4e9b\u4e1a\u52a1\u9700\u6c42\u4e2d\uff0c\u9700\u8981\u7528\u6237\u4e0a\u4f20\u4e00\u4e9b\u5927\u5bb9\u91cf\u89c6\u9891\uff0c\u8fd9\u65f6\u7528\u4f20\u7edf\u7684\u6587\u4ef6\u4e0a\u4f20\u65b9\u5f0f\u4f1a\u9020\u6210\u4f20\u8f93\u6548\u7387\u53d8\u6162\u7684\u95ee\u9898\u3002\u5728\u4e0a\u4f20\u6587\u4ef6\u8fc7\u7a0b\u4e2d\u4e00\u65e6\u51fa\u73b0\u4e0a\u4f20\u5931\u8d25\uff0c\u5c31\u9700\u8981\u91cd\u65b0\u5c06\u6587\u4ef6\u6574\u4e2a\u91cd\u65b0\u4e0a\u4f20\u4e00\u904d\u3002\u8fd9\u6837\u5728\u65e0\u8bba\u662f\u7528\u6237\u63d0\u4f53\u9a8c\u8fd8\u662f\u670d\u52a1\u7aef\u90fd\u662f\u4e00\u79cd\u65f6\u95f4\u548c\u8d44\u6e90\u7684\u6d6a\u8d39\u3002<\/p>\n\n\n\n
\u5728\u89c2\u5bdf\u4e00\u4e9b\u5b58\u50a8\u5927\u5382\uff0c\u6bd4\u5982\u4e03\u725b\u4e91\u3001\u767e\u5ea6\u4e91\u76d8\u7b49\u670d\u52a1\u5546\uff0c\u4ed6\u4eec\u5728\u4e0a\u4f20\u548c\u4e0b\u8f7d\u7684\u65f6\u5019\u4f1a\u628a\u6587\u4ef6\u788e\u7247\u5316\uff0c\u8fd9\u6837\u4e0d\u4ec5\u53ef\u4ee5\u5927\u5927\u63d0\u9ad8\u4f20\u8f93\u901f\u5ea6\uff0c\u4e14\u4e5f\u517c\u5bb9\u7684\u65ad\u7535\u7eed\u4f20\u7684\u529f\u80fd\uff0c\u5373\u6587\u4ef6\u4e0a\u4f20\u5931\u8d25\uff0c\u7cfb\u7edf\u5bf9\u81ea\u52a8\u68c0\u7d22\u5931\u8d25\u7684\u6587\u4ef6\u788e\u7247\uff0c\u7b49\u5f85\u7528\u6237\u91cd\u65b0\u4e0a\u4f20\u8be5\u6587\u4ef6\u65f6\u4f1a\u81ea\u52a8\u771f\u7504\u522b\u5931\u8d25\u7684\u6587\u4ef6\u788e\u7247\u8fdb\u884c\u4e0a\u4f20\u3002<\/p>\n\n\n\n
\u4e0b\u9762\u5c31\u4ecb\u7ecd\u4e0b\u524d\u7aef\u662f\u5982\u4f55\u5b9e\u73b0\u5927\u6587\u4ef6\u4e0a\u4f20\u548c\u65ad\u70b9\u7eed\u4f20\u7684<\/p>\n\n\n\n<\/div><\/figure>\n\n\n\n\u5b9e\u73b0\u7684\u6280\u672f\u70b9<\/h3>\n\n\n\n\n- \u9700\u8981\u501f\u52a9 FileReader \u5b9e\u4f8b\u5bf9\u8c61\u8fdb\u884c Budder \u7684\u8f6c\u6362<\/li>\n\n\n\n
- \u9700\u8981\u4f7f\u7528\u7b2c\u4e09\u653e Spark-md5 \u6765\u751f\u6210HASH<\/li>\n\n\n\n
- \u9700\u8981\u4f7f\u7528\u6b63\u5219\u83b7\u53d6\u6587\u4ef6\u7684\u6269\u5c55\u540d\uff0c\u540e\u671f\u548c\u7ed3\u5408 HASH \u503c\u5408\u5e76\u6210\u4e00\u4e2a\u65b0\u7684\u6587\u4ef6\u540d\u79f0\uff08\u4e0a\u56fe\u6240\u793a\uff09<\/li>\n\n\n\n
- \u9700\u8981\u501f\u52a9 file \u5bf9\u8c61\u4e2d\u7684 slice \u65b9\u6cd5\u5bf9\u6587\u4ef6\u5207\u5272\uff1b\u4f7f\u7528\u65b9\u6cd5\u548c\u6570\u7ec4\u7684 slice \u53c2\u6570\u4e00\u81f4<\/li>\n<\/ul>\n\n\n\n
\u4ee3\u7801\u5b9e\u73b0<\/h3>\n\n\n\nHTML<\/h4>\n\n\n\n <div class=\"container\">
<div class=\"buttonContainer\">
<input type=\"file\" id=\"inputInput\">
<div class=\"button-select button\">\u9009\u62e9\u6587\u4ef6<\/div>
<div class=\"button-submit button\">\u4e0a\u4f20\u6587\u4ef6<\/div>
<\/div>
<div>\u6587\u4ef6\u4ec5\u652f\u6301png\u683c\u5f0f\u7684\u6587\u4ef6<\/div>
<div class=\"progress\">
<div class=\"progressBar\" style=\"width: 10%;\"><\/div>
<\/div>
<\/div><\/code><\/pre>\n\n\n\njavascript<\/h4>\n\n\n\nlet inputInput = document.querySelector(\"#inputInput\")
let select = document.querySelector(\".button-select\")
let submit = document.querySelector(\".button-submit\")
let progressBar = document.querySelector(\".progressBar\")
let chunks=[]; \/\/ \u5207\u7247\u7684\u96c6\u5408
\u200b
\/\/ \u751f\u6210\u6587\u4ef6Buffer\u7684\u5c01\u88c5
const changeBuffer = (file)=>{
return new Promise((resolve)=>{
let fileReader = new FileReader();
fileReader.readAsArrayBuffer(file);
fileReader.onload = (event)=>{
\/\/ \u6839\u636e\u6587\u4ef6\u5185\u5bb9\u751f\u6210HASH\u503c
let bufferData = event.target.result;
let spark = new SparkMD5.ArrayBuffer();
let HASH; \/\/ \u6587\u4ef6\u7684Hash\u540d
let suffix; \/\/\u83b7\u53d6\u6587\u4ef6\u540e\u7f00\u540d
spark.append(bufferData);
HASH = spark.end();
suffix = file.name.replace(\/.+\\.\/, \"\");
resolve({
bufferData,
HASH,
suffix,
fileName:`${HASH}.${suffix}`
})
}
})
}
\u200b
\/\/ \u83b7\u53d6\u672c\u5730\u6587\u4ef6
inputInput.onchange= async ()=>{
let files = inputInput.files[0]
let {HASH,suffix,bufferData,fileName} = await changeBuffer(files);
let section = []; \/\/\u6587\u4ef6\u5207\u7247\u4e0a\u4f20\u7684\u8bb0\u5f55
\/*\u6587\u4ef6\u5207\u7247\u5904\u7406(\u4ee5\u56fa\u5b9a\u5927\u5c0f\u4e0a\u4f20\u4f18\u5148,\u5982\u679c\u5207\u7247\u6570\u91cf\u8fc7\u5927,\u5c31\u91c7\u7528\u56fa\u5b9a\u6570\u91cf)*\/
let max = 1024*100 \/\/ \u6bcf\u4e2a\u6587\u4ef6\u6700\u5927\u5728100KB
let count = Math.ceil(files.size \/ max); \/\/ \u4e00\u5171\u8981\u6709\u591a\u5c11\u5207\u7247
\/*\u8d85\u8fc7100\u4e2a\u5207\u7247,\u5c31\u91c7\u7528\u56fa\u5b9a\u6570\u91cf\u65b9\u5f0f\u4e0a\u4f20*\/
if(count>100){
max = files.size \/ 100;
count = 100;
}
for(let index=0;index<count;index++){
chunks.push({
file:files.slice(index*max,max*(index+1)),
fileName:`${HASH}_${index+1}.${suffix}`
})
}
}
\u200b
\/\/ \u89e6\u53d1\u4e0a\u4f20\u7684click\u4e8b\u4ef6
select.onclick = ()=>{
inputInput.click()
}
\u200b
\/\/ \u63d0\u4ea4
submit.onclick = ()=>{
\/\/ \u4e0a\u4f20\u6210\u529f\u7684\u5904\u7406
let ChunkState = [];
const upSuccess = (state)=>{
ChunkState.push(state);
\/\/ \u5224\u65ad\u662f\u5426\u5168\u90e8\u4e3atrue
let ChunkStateEvery = ChunkState.every((item)=>{return item==true})
if(chunks.length === ChunkState.length){
if(ChunkStateEvery){
\/\/ \u8c03\u7528\u540e\u53f0\u63a5\u53e3 \u901a\u77e5\u670d\u52a1\u5668\u53ef\u4ee5\u5bf9\u6587\u4ef6\u8fdb\u884c\u5408\u5e76
\/\/...
alter(\"\u6587\u4ef6\u4e0a\u4f20\u6210\u529f\")
}else{
alter(\"\u6587\u4ef6\u4e0a\u4f20\u51fa\u9519\u6210\u91cd\u65b0\u4e0a\u4f20\")
}
}
\/\/ \u66f4\u65b0\u8fdb\u5ea6\u6761
progressBar.style.width = `${count(ChunkState,true)\/chunks.length*100}%`
}
\/\/ \u5faa\u73af\u5207\u7247\u96c6\u5408\u9010\u4e2a\u8bf7\u6c42
chunks.map((item)=>{
let formData = new FormData();
formData.append(\"files\",item.file)
formData.append(\"fileName\",item.fileName)
axios({
method:\"POST\",
url:\"https:\/\/jsonplaceholder.typicode.com\/posts\/\",
data:formData,
}).then((response)=>{
if(response.code == 200){
upSuccess(true);
}
}).catch(()=>{
upSuccess(false);
})
})
}
\u200b
\/\/ \u7b97\u6cd5\u5c01\u88c5\u67e5\u627e\u6570\u7ec4\u4e2d\u67d0\u4e2a\u5143\u7d20\u51fa\u73b0\u7684\u6b21\u6570
const count = (arr, item)=>{
var count = 0;
arr.forEach((e)=> item === e ? count++:0);
return count;
}<\/code><\/pre>\n\n\n\n
\n\n\n\n\u5927\u6587\u4ef6\u5207\u7247\u4e0a\u4f20\u524d\u540e\u7aef\u6574\u4f53\u5b9e\u73b0\u903b\u8f91<\/h2>\n\n\n\n
\u6574\u4f53\u6d41\u7a0b\u53ef\u53c2\u8003\u4e0a\u65b9\u6d41\u7a0b\u56fe\uff0c\u6587\u4ef6\u91c7\u53d6 steam \u6d41\u65b9\u5f0f\u4f20\u9012\u7ed9\u540e\u7aef<\/p>\n\n\n\n
![\"\"\/](\"https:\/\/raw.githubusercontent.com\/gongjianOnline\/ImgHosting\/main\/img\/1650950932(1).png\")
<\/div><\/figure>\n\n\n\n\u5b9e\u73b0\u4ee3\u7801<\/h3>\n\n\n\nhtml<\/h4>\n\n\n\n <div class=\"container\">
<div class=\"buttonContainer\">
<input type=\"file\" id=\"inputInput\" style=\"display:none\">
<div class=\"button-select button\">\u9009\u62e9\u6587\u4ef6<\/div>
<div class=\"button-submit button\">\u4e0a\u4f20\u6587\u4ef6<\/div>
<\/div>
<div>\u6587\u4ef6\u4ec5\u652f\u6301png\u683c\u5f0f\u7684\u6587\u4ef6<\/div>
<div>
<ul id=\"list\"><\/ul>
<\/div>
<\/div><\/code><\/pre>\n\n\n\nHTML \u90e8\u5206\u7684\u6837\u5f0f\u5185\u5bb9\u5ffd\u7565\uff0c\u4f46\u5176\u4e2d\u7684\u6280\u672f\u70b9\u5728\u4e8e \u9690\u85cf\u4e86 input \u5143\u7d20<\/strong> \uff0c\u7528 div \u6a21\u62df\u4e86\u9009\u62e9\u6587\u4ef6\u548c\u4e0a\u4f20\u6587\u4ef6\u6309\u94ae<\/p>\n\n\n\njavaScript<\/h4>\n\n\n\nlet inputInput = document.querySelector(\"#inputInput\")
let select = document.querySelector(\".button-select\")
let submit = document.querySelector(\".button-submit\")
let list = document.querySelector(\"#list\")
let filesData;
\u200b
\/\/ \u83b7\u53d6\u672c\u5730\u6587\u4ef6
inputInput.onchange=()=>{
let files = inputInput.files[0]
console.log(files)
if(files.type !== \"image\/png\"){
alert(\"\u6587\u4ef6\u53ea\u652f\u6301png\u683c\u5f0f\")
return
}
if(files.size>2*1024*1024){
alert(\"\u6587\u4ef6\u6700\u5927\u652f\u63012MB\")
return
}
filesData = files
list.innerHTML = `
<li>${files.name} <span class=\"del\">\u79fb\u9664<\/span><\/li>
`
}
\/\/ \u65f6\u95f4\u59d4\u6258
list.onclick = (event)=>{
if(event.target.innerHTML === \"\u79fb\u9664\"){
list.innerHTML = \"\";
filesData = null
}
}
\/\/ \u89e6\u53d1\u4e0a\u4f20\u7684click\u4e8b\u4ef6
select.onclick = ()=>{
inputInput.click()
}
\/\/ \u63d0\u4ea4
submit.onclick = ()=>{
if(filesData){
let formData = new FormData();
formData.append(\"files\",filesData)
fetch(\"www.baidu.com\",{
method:\"POST\",
body:formData
}).then((response)=>{
console.log(response)
})
}
}<\/code><\/pre>\n\n\n\n\u4e0a\u9762\u7684 javascript \u4ee3\u7801\uff0c \u83b7\u53d6\u201c\u9009\u62e9\u6587\u4ef6\u201d select \uff0c\u5728 select \u70b9\u51fb\u7684\u65f6\u5019\u89e6\u53d1 input \u7684\u70b9\u51fb\u4e8b\u4ef6\uff0c\u5f39\u51fa\u6587\u4ef6\u9009\u62e9\u5668\uff1b \u7ed1\u5b9a input \u7684 change \u4e8b\u4ef6 \u76d1\u542c\u9009\u4e2d\u7684\u6587\u4ef6\u5bf9\u8c61\uff0c \u901a\u8fc7 files \u5c5e\u6027\u83b7\u53d6\u5bf9\u8c61\u5168\u90e8\u4fe1\u606f\u5e76\u4f5c\u76f8\u5e94\u7684\u4e1a\u52a1\u5224\u65ad\uff0c\u6bd4\u5982 \u6587\u4ef6\u7c7b\u578b\u3001\u6587\u4ef6\u5927\u5c0f\u3001\u6587\u4ef6\u4e0a\u4f20\u5217\u8868\u7b49\u3002\u901a\u8fc7\u70b9\u51fb submit \u5143\u7d20\u624b\u52a8\u521b\u5efa formData \u5b9e\u4f8b \u5c06\u6587\u4ef6\u5143\u7d20\u6dfb\u52a0\u8fdb\u53bb\uff0c\u4f20\u7ed9\u540e\u7aef<\/p>\n\n\n\n
\n\n\n\n\u5355\u4e00\u6587\u4ef6\u4e0a\u4f20BASE64<\/h2>\n\n\n\n
\u5355\u4e00\u6587\u4ef6\u4e0a\u4f20\u5c06\u6587\u4ef6\u8f6c\u4e3a base64\u7f16\u7801 \uff0c \u4e3b\u8981\u501f\u52a9 FileReader \u5b9e\u4f8b\u5bf9\u8c61\uff0c\u8be5\u5bf9\u8c61\u4e0d\u4ec5\u53ef\u4ee5\u8f6c\u5316\u4e3a base64\uff0c\u8fd8\u652f\u6301 readAsArrayBuffer \u7684\u8f6c\u6362\u3002<\/p>\n\n\n\n
\u5b9e\u73b0\u7ed3\u679c<\/h3>\n\n\n\n<\/div><\/figure>\n\n\n\n\u4ee5\u4e0a\u4ee3\u7801\u7684\u5b9e\u73b0\u5f62\u5f0f\uff0c\u70b9\u51fb \u9009\u62e9\u6587\u4ef6 \u6309\u94ae\uff0c\u9009\u62e9\u6587\u4ef6\u540e\u81ea\u52a8\u4e0a\u4f20\u3002<\/p>\n\n\n\n
\u5b9e\u73b0\u65b9\u5f0f<\/h3>\n\n\n\nhtml<\/h4>\n\n\n\n <div class=\"container\">
<div class=\"buttonContainer\">
<input type=\"file\" id=\"inputInput\">
<div class=\"button-select button\">\u9009\u62e9\u6587\u4ef6<\/div>
<\/div>
<div>\u6587\u4ef6\u4ec5\u652f\u6301png\u683c\u5f0f\u7684\u6587\u4ef6<\/div>
<\/div><\/code><\/pre>\n\n\n\njavascript<\/h4>\n\n\n\nlet inputInput = document.querySelector(\"#inputInput\")
let select = document.querySelector(\".button-select\")
\u200b
let fileReader =(files)=>{
return new Promise((resolve,reject)=>{
let fileReader = new FileReader();
fileReader.readAsDataURL(files)
fileReader.onload=(event)=>{
resolve(event.target.result)
}
})
}
\/\/ \u83b7\u53d6\u672c\u5730\u6587\u4ef6
inputInput.onchange=async ()=>{
let files = inputInput.files[0]
if(files.size>2*1024*1024){
alert(\"\u6587\u4ef6\u6700\u5927\u652f\u63012MB\")
return
}
let base64 = await fileReader(files)
fetch(\"http:\/\/www.baidu.com\",{
method:\"POST\",
headers:{
'Content-Type': 'application\/x-www-form-urlencoded'
},
body:JSON.stringify({
files:base64,
filesName:files.name
})
})
}
\/\/ \u89e6\u53d1\u4e0a\u4f20\u7684click\u4e8b\u4ef6
select.onclick = ()=>{
inputInput.click()
}<\/code><\/pre>\n\n\n\n\u5b9e\u73b0\u81ea\u52a8\u4e0a\u4f20\u7684\u903b\u8f91\uff0c\u4e3b\u8981\u662f\u76d1\u542c input file \u7684 change \u4e8b\u4ef6\uff0c\u5728 change \u4e8b\u4ef6\u4e2d\u76f4\u63a5\u5904\u7406\u56fe\u7247\u4e3a base64 \u7f16\u7801\uff0c\u7136\u540e\u8bf7\u6c42\u540e\u53f0\u63a5\u53e3\u3002<\/p>\n\n\n\n
\u503c\u5f97\u6ce8\u610f\u7684\u662f FileReader \u7684\u5b9e\u4f8b\u4e3a\u5f02\u6b65\u65b9\u6cd5\uff0c\u6240\u4ee5\u4e0a\u9762\u4ee3\u7801\u5bf9 FileReacer \u505a\u4e86 Promise \u7684\u5c01\u88c5\uff0c\u81f3\u4e8e\u4e0d\u4e86\u89e3 Promise \u7684\u5c0f\u4f19\u4f34\u8bf7\u81ea\u884c\u767e\u5ea6\u77e5\u8bc6\u76f2\u533a\u3002<\/p>\n\n\n\n
\n\n\n\n\u6587\u4ef6\u4e0a\u4f20\u7f29\u7565\u56fe<\/h2>\n\n\n\n
\u501f\u52a9 base64 \u7f16\u7801 \u5b9e\u73b0\u6587\u4ef6\u7f29\u7565\u56fe\u6548\u679c<\/p>\n\n\n\n
\u5b9e\u73b0\u7ed3\u679c<\/h3>\n\n\n\n<\/div><\/figure>\n\n\n\n\u5b9e\u73b0\u903b\u8f91<\/h3>\n\n\n\n
\u5c06\u6587\u4ef6 \u7f16\u7801\u4e3abase64\uff0c\u590d\u5236\u7ed9 img \u5143\u7d20<\/p>\n\n\n\n
html<\/h4>\n\n\n\n <div class=\"container\">
<div class=\"buttonContainer\">
<input type=\"file\" id=\"inputInput\">
<div class=\"button-select button\">\u9009\u62e9\u6587\u4ef6<\/div>
<div class=\"button-submit button\">\u4e0a\u4f20\u6587\u4ef6<\/div>
<\/div>
<div>
<img src=\"\" alt=\"\" id=\"img\">
<\/div>
<\/div><\/code><\/pre>\n\n\n\njavascript<\/h4>\n\n\n\nlet inputInput = document.querySelector(\"#inputInput\")
let select = document.querySelector(\".button-select\")
let submit = document.querySelector(\".button-submit\")
let img = document.querySelector(\"#img\")
let filesData;
\u200b
\/\/ \u5c06\u6587\u4ef6\u8f6c\u6210base64
const toBase64 = (files)=>{
return new Promise((resolve,reject)=>{
let fileReader = new FileReader();
fileReader.readAsDataURL(files)
fileReader.onload=(event)=>{
resolve(event.target.result)
}
})
}
\u200b
\/\/ \u83b7\u53d6\u672c\u5730\u6587\u4ef6
inputInput.onchange=async ()=>{
let files = inputInput.files[0]
console.log(files)
if(files.size>2*1024*1024){
alert(\"\u6587\u4ef6\u6700\u5927\u652f\u63012MB\")
return
}
filesData = files;
let base64 = await toBase64(files);
console.log(\"base64\",base64)
img.src = base64
}
\/\/ \u89e6\u53d1\u4e0a\u4f20\u7684click\u4e8b\u4ef6
select.onclick = ()=>{
inputInput.click()
}
\/\/ \u63d0\u4ea4
submit.onclick = ()=>{
if(filesData){
let formData = new FormData();
formData.append(\"files\",filesData)
fetch(\"www.baidu.com\",{
method:\"POST\",
body:formData
}).then((response)=>{
console.log(response)
})
}
}<\/code><\/pre>\n\n\n\n
\n\n\n\n\u6587\u4ef6\u4e0a\u4f20\u8fdb\u5ea6\u7ba1\u63a7<\/h2>\n\n\n\n
\u4f7f\u7528 axios \u6216\u8005 \u539f\u751f XHR \u53d1\u8d77\u63a5\u53e3\u8bf7\u6c42\uff0c\u5176\u4e2d\u8fd9\u4e24\u4e2a\u5b9e\u4f8b\u4e2d\u63d0\u4f9b\u4e86 onUploadProgress \u5c5e\u6027\uff0c onUploadProgress \u4e3a\u4e00\u4e2a\u56de\u8c03\u51fd\u6570\uff0c\u76d1\u542c\u4e0a\u4f20\u72b6\u6001 \u5176\u4e2d loaded \u4e3a\u5f53\u524d\u4e0a\u4f20\u7684\u6570\u91cf\uff0ctotal \u4e3a\u6587\u4ef6\u603b\u91cf\u3002<\/p>\n\n\n\n
\u503c\u5f97\u6ce8\u610f\u7684\u662f\u65b0\u7684 fetch \u8bf7\u6c42\u65b9\u5f0f\uff0c\u65e0\u6cd5\u76d1\u542c\u6587\u4ef6\u4e0a\u4f20\u548c\u4e0b\u8f7d\u8fdb\u5ea6\u72b6\u6001<\/p>\n\n\n\n
\u5b9e\u73b0\u7ed3\u679c<\/h3>\n\n\n\n<\/div><\/figure>\n\n\n\n\u5b9e\u73b0\u65b9\u5f0f<\/h3>\n\n\n\nhtml<\/h4>\n\n\n\n <div class=\"container\">
<div class=\"buttonContainer\">
<input type=\"file\" id=\"inputInput\">
<div class=\"button-select button\">\u9009\u62e9\u6587\u4ef6<\/div>
<div class=\"button-submit button\">\u4e0a\u4f20\u6587\u4ef6<\/div>
<\/div>
<div>\u6587\u4ef6\u4ec5\u652f\u6301png\u683c\u5f0f\u7684\u6587\u4ef6<\/div>
<div class=\"progress\">
<div class=\"progressBar\" style=\"width: 10%;\"><\/div>
<\/div>
<\/div><\/code><\/pre>\n\n\n\njavascript<\/h4>\n\n\n\nlet inputInput = document.querySelector(\"#inputInput\")
let select = document.querySelector(\".button-select\")
let submit = document.querySelector(\".button-submit\")
let progressBar = document.querySelector(\".progressBar\")
let filesData;
\u200b
\u200b
\/\/ \u83b7\u53d6\u672c\u5730\u6587\u4ef6
inputInput.onchange=()=>{
let files = inputInput.files[0]
console.log(files)
if(files.type !== \"text\/plain\"){
alert(\"\u6587\u4ef6\u53ea\u652f\u6301text\u683c\u5f0f\")
return
}
if(files.size>2*1024*1024){
alert(\"\u6587\u4ef6\u6700\u5927\u652f\u63012MB\")
return
}
filesData = files
}
\/\/ \u89e6\u53d1\u4e0a\u4f20\u7684click\u4e8b\u4ef6
select.onclick = ()=>{
inputInput.click()
}
\/\/ \u63d0\u4ea4
submit.onclick = ()=>{
if(filesData){
let formData = new FormData();
formData.append(\"files\",filesData)
axios({
method:\"POST\",
url:\"https:\/\/jsonplaceholder.typicode.com\/posts\/\",
data:formData,
onUploadProgress:(ev)=>{
let {loaded,total} = ev;
progressBar.style.width = `${loaded\/total*100}%`
}
}).then((response)=>{
console.log(response)
})
}
}<\/code><\/pre>\n\n\n\n
\n\n\n\n\u591a\u6587\u4ef6\u4e0a\u4f20\u53ca\u8fdb\u5ea6\u7ba1\u63a7<\/h2>\n\n\n\n
\u540c\u5355\u6587\u4ef6\u5b9e\u73b0\u601d\u8def\u4e00\u6837\uff0c\u591a\u6587\u4ef6\u4e0a\u4f20\u9488\u5bf9\u6bcf\u4e2a\u6587\u4ef6\u8fdb\u884c\u8fdb\u5ea6\u7ba1\u63a7\u7684\u65b9\u6848\u5728\u4e8e\uff0c\u6bcf\u4e00\u4e2a\u6587\u4ef6\u90fd\u4f1a\u5355\u72ec\u8bf7\u6c42\u4e00\u6b21\u63a5\u53e3\u3002<\/p>\n\n\n\n
\u4f18\u70b9\uff1a\u53ef\u4ee5\u5bf9\u6bcf\u4e00\u4e2a\u6587\u4ef6\u8fdb\u884c\u7ba1\u63a7\uff0c\u5e76\u4e14\u4f1a\u964d\u4f4e\u6587\u4ef6\u4e0a\u4f20\u5230\u5bb9\u91cf<\/p>\n\n\n\n
\u7f3a\u70b9\uff1a\u4f1a\u91cd\u590d\u591a\u6b21\u7684\u8c03\u7528\u4e00\u4e2a\u63a5\u53e3\uff0c\u5bf9\u63a5\u53e3\u548c\u670d\u52a1\u5668\u9020\u6210\u7684\u538b\u529b\u8f83\u5927<\/p>\n\n\n\n
\u9488\u5bf9\u4e8e\u5408\u5e76\u591a\u6587\u4ef6\u8bf7\u6c42\u7684\u65b9\u5f0f\u4e4b\u524d\u5728 element \u6a21\u5757\u4e2d\u300a\u6587\u4ef6\u4e0a\u4f20\u300b\u4e2d\u603b\u7ed3\u8fc7 \u5b9e\u73b0\u7684\u65b9\u6cd5\uff0c \u611f\u5174\u8da3\u7684\u5c0f\u4f19\u4f34\u53ef\u4ee5\u79fb\u6b65\u53bb\u53e6\u4e00\u7bc7\u6587\u7ae0<\/p>\n\n\n\n
\u5b9e\u73b0\u7ed3\u679c\uff1a<\/h3>\n\n\n\n<\/div><\/figure>\n\n\n\n\u5b9e\u73b0\u65b9\u5f0f<\/h3>\n\n\n\nhtml<\/h4>\n\n\n\n <div class=\"container\">
<div class=\"buttonContainer\">
<input type=\"file\" id=\"inputInput\" multiple>
<div class=\"button-select button\">\u9009\u62e9\u6587\u4ef6<\/div>
<div class=\"button-submit button\">\u4e0a\u4f20\u6587\u4ef6<\/div>
<\/div>
<div>\u6587\u4ef6\u4ec5\u652f\u6301png\u683c\u5f0f\u7684\u6587\u4ef6<\/div>
<div>
<ul id=\"list\">
<\/ul>
<\/div>
<\/div><\/code><\/pre>\n\n\n\njavascript<\/h4>\n\n\n\nlet inputInput = document.querySelector(\"#inputInput\")
let select = document.querySelector(\".button-select\")
let submit = document.querySelector(\".button-submit\")
let list = document.querySelector(\"#list\")
let filesData;
\u200b
\/\/ \u83b7\u53d6\u672c\u5730\u6587\u4ef6
inputInput.onchange=()=>{
filesData =Array.from(inputInput.files)
console.log(\"\u591a\u6587\u4ef6\u4e0a\u4f20\",filesData)
filesData.map((item)=>{
list.innerHTML+= `
<li>
${item.name}
<div class=\"progress\">
<div class=\"progressBar\" data-name=\"${item.name}\" style=\"width:10%\"><\/div>
<\/div>
<\/li>
`
})
}
\/\/ \u89e6\u53d1\u4e0a\u4f20\u7684click\u4e8b\u4ef6
select.onclick = ()=>{
inputInput.click()
}
\/\/ \u63d0\u4ea4
submit.onclick = ()=>{
console.log(filesData)
if(filesData.length){
filesData.map((item)=>{
let formData = new FormData();
formData.append(\"files\",item)
axios({
method:\"POST\",
url:\"https:\/\/jsonplaceholder.typicode.com\/posts\/\",
data:formData,
onUploadProgress:(ev)=>{
let el = document.querySelector(`div[data-name=\"${item.name}\"]`)
let {loaded,total} = ev;
el.style.width = `${loaded\/total*100}%`
}
}).then((response)=>{
console.log(response)
})
})
}
}<\/code><\/pre>\n\n\n\n\u4e0a\u9762 JS \u7684\u5b9e\u73b0\u903b\u8f91\u4e3a \u6bcf\u4e00\u4e2a li \u5143\u7d20\u7ed1\u5b9a\u552f\u4e00\u7684 \u81ea\u5b9a\u4e49\u5c5e\u6027\u76ee\u524d\u4ee5\u4e3a\u6587\u4ef6\u540d\u79f0\u4f5c\u4e3a\u552f\u4e00\u503c\uff0c\u5728\u8c03\u7528\u63a5\u53e3\u7684\u4e2d\u76d1\u542c onUploadProgress \u5229\u7528\u5f53\u524d\u7684 file \u5bf9\u8c61\u7684 name \u5c5e\u6027\uff0c\u627e\u5230\u76f8\u5bf9\u7684 DOM \u8282\u70b9\uff0c\u8ba1\u7b97\u8fdb\u5ea6\u5e76\u8d4b\u503c\u3002<\/p>\n\n\n\n
\n\n\n\n\u62d6\u62fd\u4e0a\u4f20<\/h2>\n\n\n\n
\u62d6\u62fd\u4e0a\u4f20\u7684\u5b9e\u73b0\u65b9\u5f0f \u4e3b\u8981\u4e8e\u501f\u52a9\u4e86 H5 \u7684API dragover \\ drop \u65b9\u6cd5\uff0c\u7528\u6765\u76d1\u542c\u5728\u6b64\u533a\u57df\u5185\u7684\u9f20\u6807\u79fb\u52a8\u548c\u653e\u4e0b\u4e8b\u4ef6\u3002<\/p>\n\n\n\n
\u5b9e\u73b0\u7ed3\u679c<\/h3>\n\n\n\n<\/div><\/figure>\n\n\n\n\u5b9e\u73b0\u65b9\u5f0f<\/h3>\n\n\n\nhtml<\/h4>\n\n\n\n <div class=\"container\" id=\"upWrapper\">
<div class=\"content\">
<img src=\".\/img\/\u4e0a\u4f20.png\" alt=\"\">\\
<\/div>
<\/div><\/code><\/pre>\n\n\n\njavascript<\/h4>\n\n\n\nlet upWrapper = document.querySelector(\"#upWrapper\")
\/\/ \u8fdb\u5165\u4e8b\u4ef6
upWrapper.addEventListener(\"dragover\",(event)=>{
event.preventDefault();
})
\/\/ \u653e\u7f6e\u4e8b\u4ef6
upWrapper.addEventListener(\"drop\",(event)=>{
event.preventDefault();
submit(event.dataTransfer.files)
})
\/\/ \u63d0\u4ea4\u4e8b\u4ef6
const submit = (filesData)=>{
let formData = new FormData();
formData.append(\"files\",filesData)
axios({
method:\"POST\",
url:\"https:\/\/jsonplaceholder.typicode.com\/posts\/\",
data:formData,
}).then((response)=>{
console.log(response)
})
}<\/code><\/pre>\n\n\n\n\u4e0a\u9762 js \u7684\u4e3b\u8981\u903b\u8f91\u4e3a\uff0c \u5728 drop \u4e8b\u4ef6\u4e2d\u83b7\u53d6 \u6587\u4ef6\u7684\u5c5e\u6027 event.dataTransfer.files \uff0c\u7136\u540e\u5c06\u6587\u4ef6\u5c5e\u6027\u4f20\u7ed9\u670d\u52a1\u7aef\u3002<\/p>\n\n\n\n
\n\n\n\n\u5927\u6587\u4ef6\u4e0a\u4f20\u548c\u65ad\u70b9\u7eed\u4f20<\/h2>\n\n\n\n
\u5728\u4e00\u4e9b\u4e1a\u52a1\u9700\u6c42\u4e2d\uff0c\u9700\u8981\u7528\u6237\u4e0a\u4f20\u4e00\u4e9b\u5927\u5bb9\u91cf\u89c6\u9891\uff0c\u8fd9\u65f6\u7528\u4f20\u7edf\u7684\u6587\u4ef6\u4e0a\u4f20\u65b9\u5f0f\u4f1a\u9020\u6210\u4f20\u8f93\u6548\u7387\u53d8\u6162\u7684\u95ee\u9898\u3002\u5728\u4e0a\u4f20\u6587\u4ef6\u8fc7\u7a0b\u4e2d\u4e00\u65e6\u51fa\u73b0\u4e0a\u4f20\u5931\u8d25\uff0c\u5c31\u9700\u8981\u91cd\u65b0\u5c06\u6587\u4ef6\u6574\u4e2a\u91cd\u65b0\u4e0a\u4f20\u4e00\u904d\u3002\u8fd9\u6837\u5728\u65e0\u8bba\u662f\u7528\u6237\u63d0\u4f53\u9a8c\u8fd8\u662f\u670d\u52a1\u7aef\u90fd\u662f\u4e00\u79cd\u65f6\u95f4\u548c\u8d44\u6e90\u7684\u6d6a\u8d39\u3002<\/p>\n\n\n\n
\u5728\u89c2\u5bdf\u4e00\u4e9b\u5b58\u50a8\u5927\u5382\uff0c\u6bd4\u5982\u4e03\u725b\u4e91\u3001\u767e\u5ea6\u4e91\u76d8\u7b49\u670d\u52a1\u5546\uff0c\u4ed6\u4eec\u5728\u4e0a\u4f20\u548c\u4e0b\u8f7d\u7684\u65f6\u5019\u4f1a\u628a\u6587\u4ef6\u788e\u7247\u5316\uff0c\u8fd9\u6837\u4e0d\u4ec5\u53ef\u4ee5\u5927\u5927\u63d0\u9ad8\u4f20\u8f93\u901f\u5ea6\uff0c\u4e14\u4e5f\u517c\u5bb9\u7684\u65ad\u7535\u7eed\u4f20\u7684\u529f\u80fd\uff0c\u5373\u6587\u4ef6\u4e0a\u4f20\u5931\u8d25\uff0c\u7cfb\u7edf\u5bf9\u81ea\u52a8\u68c0\u7d22\u5931\u8d25\u7684\u6587\u4ef6\u788e\u7247\uff0c\u7b49\u5f85\u7528\u6237\u91cd\u65b0\u4e0a\u4f20\u8be5\u6587\u4ef6\u65f6\u4f1a\u81ea\u52a8\u771f\u7504\u522b\u5931\u8d25\u7684\u6587\u4ef6\u788e\u7247\u8fdb\u884c\u4e0a\u4f20\u3002<\/p>\n\n\n\n
\u4e0b\u9762\u5c31\u4ecb\u7ecd\u4e0b\u524d\u7aef\u662f\u5982\u4f55\u5b9e\u73b0\u5927\u6587\u4ef6\u4e0a\u4f20\u548c\u65ad\u70b9\u7eed\u4f20\u7684<\/p>\n\n\n\n<\/div><\/figure>\n\n\n\n\u5b9e\u73b0\u7684\u6280\u672f\u70b9<\/h3>\n\n\n\n\n- \u9700\u8981\u501f\u52a9 FileReader \u5b9e\u4f8b\u5bf9\u8c61\u8fdb\u884c Budder \u7684\u8f6c\u6362<\/li>\n\n\n\n
- \u9700\u8981\u4f7f\u7528\u7b2c\u4e09\u653e Spark-md5 \u6765\u751f\u6210HASH<\/li>\n\n\n\n
- \u9700\u8981\u4f7f\u7528\u6b63\u5219\u83b7\u53d6\u6587\u4ef6\u7684\u6269\u5c55\u540d\uff0c\u540e\u671f\u548c\u7ed3\u5408 HASH \u503c\u5408\u5e76\u6210\u4e00\u4e2a\u65b0\u7684\u6587\u4ef6\u540d\u79f0\uff08\u4e0a\u56fe\u6240\u793a\uff09<\/li>\n\n\n\n
- \u9700\u8981\u501f\u52a9 file \u5bf9\u8c61\u4e2d\u7684 slice \u65b9\u6cd5\u5bf9\u6587\u4ef6\u5207\u5272\uff1b\u4f7f\u7528\u65b9\u6cd5\u548c\u6570\u7ec4\u7684 slice \u53c2\u6570\u4e00\u81f4<\/li>\n<\/ul>\n\n\n\n
\u4ee3\u7801\u5b9e\u73b0<\/h3>\n\n\n\nHTML<\/h4>\n\n\n\n <div class=\"container\">
<div class=\"buttonContainer\">
<input type=\"file\" id=\"inputInput\">
<div class=\"button-select button\">\u9009\u62e9\u6587\u4ef6<\/div>
<div class=\"button-submit button\">\u4e0a\u4f20\u6587\u4ef6<\/div>
<\/div>
<div>\u6587\u4ef6\u4ec5\u652f\u6301png\u683c\u5f0f\u7684\u6587\u4ef6<\/div>
<div class=\"progress\">
<div class=\"progressBar\" style=\"width: 10%;\"><\/div>
<\/div>
<\/div><\/code><\/pre>\n\n\n\njavascript<\/h4>\n\n\n\nlet inputInput = document.querySelector(\"#inputInput\")
let select = document.querySelector(\".button-select\")
let submit = document.querySelector(\".button-submit\")
let progressBar = document.querySelector(\".progressBar\")
let chunks=[]; \/\/ \u5207\u7247\u7684\u96c6\u5408
\u200b
\/\/ \u751f\u6210\u6587\u4ef6Buffer\u7684\u5c01\u88c5
const changeBuffer = (file)=>{
return new Promise((resolve)=>{
let fileReader = new FileReader();
fileReader.readAsArrayBuffer(file);
fileReader.onload = (event)=>{
\/\/ \u6839\u636e\u6587\u4ef6\u5185\u5bb9\u751f\u6210HASH\u503c
let bufferData = event.target.result;
let spark = new SparkMD5.ArrayBuffer();
let HASH; \/\/ \u6587\u4ef6\u7684Hash\u540d
let suffix; \/\/\u83b7\u53d6\u6587\u4ef6\u540e\u7f00\u540d
spark.append(bufferData);
HASH = spark.end();
suffix = file.name.replace(\/.+\\.\/, \"\");
resolve({
bufferData,
HASH,
suffix,
fileName:`${HASH}.${suffix}`
})
}
})
}
\u200b
\/\/ \u83b7\u53d6\u672c\u5730\u6587\u4ef6
inputInput.onchange= async ()=>{
let files = inputInput.files[0]
let {HASH,suffix,bufferData,fileName} = await changeBuffer(files);
let section = []; \/\/\u6587\u4ef6\u5207\u7247\u4e0a\u4f20\u7684\u8bb0\u5f55
\/*\u6587\u4ef6\u5207\u7247\u5904\u7406(\u4ee5\u56fa\u5b9a\u5927\u5c0f\u4e0a\u4f20\u4f18\u5148,\u5982\u679c\u5207\u7247\u6570\u91cf\u8fc7\u5927,\u5c31\u91c7\u7528\u56fa\u5b9a\u6570\u91cf)*\/
let max = 1024*100 \/\/ \u6bcf\u4e2a\u6587\u4ef6\u6700\u5927\u5728100KB
let count = Math.ceil(files.size \/ max); \/\/ \u4e00\u5171\u8981\u6709\u591a\u5c11\u5207\u7247
\/*\u8d85\u8fc7100\u4e2a\u5207\u7247,\u5c31\u91c7\u7528\u56fa\u5b9a\u6570\u91cf\u65b9\u5f0f\u4e0a\u4f20*\/
if(count>100){
max = files.size \/ 100;
count = 100;
}
for(let index=0;index<count;index++){
chunks.push({
file:files.slice(index*max,max*(index+1)),
fileName:`${HASH}_${index+1}.${suffix}`
})
}
}
\u200b
\/\/ \u89e6\u53d1\u4e0a\u4f20\u7684click\u4e8b\u4ef6
select.onclick = ()=>{
inputInput.click()
}
\u200b
\/\/ \u63d0\u4ea4
submit.onclick = ()=>{
\/\/ \u4e0a\u4f20\u6210\u529f\u7684\u5904\u7406
let ChunkState = [];
const upSuccess = (state)=>{
ChunkState.push(state);
\/\/ \u5224\u65ad\u662f\u5426\u5168\u90e8\u4e3atrue
let ChunkStateEvery = ChunkState.every((item)=>{return item==true})
if(chunks.length === ChunkState.length){
if(ChunkStateEvery){
\/\/ \u8c03\u7528\u540e\u53f0\u63a5\u53e3 \u901a\u77e5\u670d\u52a1\u5668\u53ef\u4ee5\u5bf9\u6587\u4ef6\u8fdb\u884c\u5408\u5e76
\/\/...
alter(\"\u6587\u4ef6\u4e0a\u4f20\u6210\u529f\")
}else{
alter(\"\u6587\u4ef6\u4e0a\u4f20\u51fa\u9519\u6210\u91cd\u65b0\u4e0a\u4f20\")
}
}
\/\/ \u66f4\u65b0\u8fdb\u5ea6\u6761
progressBar.style.width = `${count(ChunkState,true)\/chunks.length*100}%`
}
\/\/ \u5faa\u73af\u5207\u7247\u96c6\u5408\u9010\u4e2a\u8bf7\u6c42
chunks.map((item)=>{
let formData = new FormData();
formData.append(\"files\",item.file)
formData.append(\"fileName\",item.fileName)
axios({
method:\"POST\",
url:\"https:\/\/jsonplaceholder.typicode.com\/posts\/\",
data:formData,
}).then((response)=>{
if(response.code == 200){
upSuccess(true);
}
}).catch(()=>{
upSuccess(false);
})
})
}
\u200b
\/\/ \u7b97\u6cd5\u5c01\u88c5\u67e5\u627e\u6570\u7ec4\u4e2d\u67d0\u4e2a\u5143\u7d20\u51fa\u73b0\u7684\u6b21\u6570
const count = (arr, item)=>{
var count = 0;
arr.forEach((e)=> item === e ? count++:0);
return count;
}<\/code><\/pre>\n\n\n\n
\n\n\n\n\u5927\u6587\u4ef6\u5207\u7247\u4e0a\u4f20\u524d\u540e\u7aef\u6574\u4f53\u5b9e\u73b0\u903b\u8f91<\/h2>\n\n\n\n
\u6574\u4f53\u6d41\u7a0b\u53ef\u53c2\u8003\u4e0a\u65b9\u6d41\u7a0b\u56fe\uff0c\u6587\u4ef6\u91c7\u53d6 steam \u6d41\u65b9\u5f0f\u4f20\u9012\u7ed9\u540e\u7aef<\/p>\n\n\n\n
<div class=\"container\">
<div class=\"buttonContainer\">
<input type=\"file\" id=\"inputInput\" style=\"display:none\">
<div class=\"button-select button\">\u9009\u62e9\u6587\u4ef6<\/div>
<div class=\"button-submit button\">\u4e0a\u4f20\u6587\u4ef6<\/div>
<\/div>
<div>\u6587\u4ef6\u4ec5\u652f\u6301png\u683c\u5f0f\u7684\u6587\u4ef6<\/div>
<div>
<ul id=\"list\"><\/ul>
<\/div>
<\/div><\/code><\/pre>\n\n\n\nHTML \u90e8\u5206\u7684\u6837\u5f0f\u5185\u5bb9\u5ffd\u7565\uff0c\u4f46\u5176\u4e2d\u7684\u6280\u672f\u70b9\u5728\u4e8e \u9690\u85cf\u4e86 input \u5143\u7d20<\/strong> \uff0c\u7528 div \u6a21\u62df\u4e86\u9009\u62e9\u6587\u4ef6\u548c\u4e0a\u4f20\u6587\u4ef6\u6309\u94ae<\/p>\n\n\n\njavaScript<\/h4>\n\n\n\nlet inputInput = document.querySelector(\"#inputInput\")
let select = document.querySelector(\".button-select\")
let submit = document.querySelector(\".button-submit\")
let list = document.querySelector(\"#list\")
let filesData;
\u200b
\/\/ \u83b7\u53d6\u672c\u5730\u6587\u4ef6
inputInput.onchange=()=>{
let files = inputInput.files[0]
console.log(files)
if(files.type !== \"image\/png\"){
alert(\"\u6587\u4ef6\u53ea\u652f\u6301png\u683c\u5f0f\")
return
}
if(files.size>2*1024*1024){
alert(\"\u6587\u4ef6\u6700\u5927\u652f\u63012MB\")
return
}
filesData = files
list.innerHTML = `
<li>${files.name} <span class=\"del\">\u79fb\u9664<\/span><\/li>
`
}
\/\/ \u65f6\u95f4\u59d4\u6258
list.onclick = (event)=>{
if(event.target.innerHTML === \"\u79fb\u9664\"){
list.innerHTML = \"\";
filesData = null
}
}
\/\/ \u89e6\u53d1\u4e0a\u4f20\u7684click\u4e8b\u4ef6
select.onclick = ()=>{
inputInput.click()
}
\/\/ \u63d0\u4ea4
submit.onclick = ()=>{
if(filesData){
let formData = new FormData();
formData.append(\"files\",filesData)
fetch(\"www.baidu.com\",{
method:\"POST\",
body:formData
}).then((response)=>{
console.log(response)
})
}
}<\/code><\/pre>\n\n\n\n\u4e0a\u9762\u7684 javascript \u4ee3\u7801\uff0c \u83b7\u53d6\u201c\u9009\u62e9\u6587\u4ef6\u201d select \uff0c\u5728 select \u70b9\u51fb\u7684\u65f6\u5019\u89e6\u53d1 input \u7684\u70b9\u51fb\u4e8b\u4ef6\uff0c\u5f39\u51fa\u6587\u4ef6\u9009\u62e9\u5668\uff1b \u7ed1\u5b9a input \u7684 change \u4e8b\u4ef6 \u76d1\u542c\u9009\u4e2d\u7684\u6587\u4ef6\u5bf9\u8c61\uff0c \u901a\u8fc7 files \u5c5e\u6027\u83b7\u53d6\u5bf9\u8c61\u5168\u90e8\u4fe1\u606f\u5e76\u4f5c\u76f8\u5e94\u7684\u4e1a\u52a1\u5224\u65ad\uff0c\u6bd4\u5982 \u6587\u4ef6\u7c7b\u578b\u3001\u6587\u4ef6\u5927\u5c0f\u3001\u6587\u4ef6\u4e0a\u4f20\u5217\u8868\u7b49\u3002\u901a\u8fc7\u70b9\u51fb submit \u5143\u7d20\u624b\u52a8\u521b\u5efa formData \u5b9e\u4f8b \u5c06\u6587\u4ef6\u5143\u7d20\u6dfb\u52a0\u8fdb\u53bb\uff0c\u4f20\u7ed9\u540e\u7aef<\/p>\n\n\n\n
\n\n\n\n\u5355\u4e00\u6587\u4ef6\u4e0a\u4f20BASE64<\/h2>\n\n\n\n
\u5355\u4e00\u6587\u4ef6\u4e0a\u4f20\u5c06\u6587\u4ef6\u8f6c\u4e3a base64\u7f16\u7801 \uff0c \u4e3b\u8981\u501f\u52a9 FileReader \u5b9e\u4f8b\u5bf9\u8c61\uff0c\u8be5\u5bf9\u8c61\u4e0d\u4ec5\u53ef\u4ee5\u8f6c\u5316\u4e3a base64\uff0c\u8fd8\u652f\u6301 readAsArrayBuffer \u7684\u8f6c\u6362\u3002<\/p>\n\n\n\n
\u5b9e\u73b0\u7ed3\u679c<\/h3>\n\n\n\n<\/div><\/figure>\n\n\n\n\u4ee5\u4e0a\u4ee3\u7801\u7684\u5b9e\u73b0\u5f62\u5f0f\uff0c\u70b9\u51fb \u9009\u62e9\u6587\u4ef6 \u6309\u94ae\uff0c\u9009\u62e9\u6587\u4ef6\u540e\u81ea\u52a8\u4e0a\u4f20\u3002<\/p>\n\n\n\n
\u5b9e\u73b0\u65b9\u5f0f<\/h3>\n\n\n\nhtml<\/h4>\n\n\n\n <div class=\"container\">
<div class=\"buttonContainer\">
<input type=\"file\" id=\"inputInput\">
<div class=\"button-select button\">\u9009\u62e9\u6587\u4ef6<\/div>
<\/div>
<div>\u6587\u4ef6\u4ec5\u652f\u6301png\u683c\u5f0f\u7684\u6587\u4ef6<\/div>
<\/div><\/code><\/pre>\n\n\n\njavascript<\/h4>\n\n\n\nlet inputInput = document.querySelector(\"#inputInput\")
let select = document.querySelector(\".button-select\")
\u200b
let fileReader =(files)=>{
return new Promise((resolve,reject)=>{
let fileReader = new FileReader();
fileReader.readAsDataURL(files)
fileReader.onload=(event)=>{
resolve(event.target.result)
}
})
}
\/\/ \u83b7\u53d6\u672c\u5730\u6587\u4ef6
inputInput.onchange=async ()=>{
let files = inputInput.files[0]
if(files.size>2*1024*1024){
alert(\"\u6587\u4ef6\u6700\u5927\u652f\u63012MB\")
return
}
let base64 = await fileReader(files)
fetch(\"http:\/\/www.baidu.com\",{
method:\"POST\",
headers:{
'Content-Type': 'application\/x-www-form-urlencoded'
},
body:JSON.stringify({
files:base64,
filesName:files.name
})
})
}
\/\/ \u89e6\u53d1\u4e0a\u4f20\u7684click\u4e8b\u4ef6
select.onclick = ()=>{
inputInput.click()
}<\/code><\/pre>\n\n\n\n\u5b9e\u73b0\u81ea\u52a8\u4e0a\u4f20\u7684\u903b\u8f91\uff0c\u4e3b\u8981\u662f\u76d1\u542c input file \u7684 change \u4e8b\u4ef6\uff0c\u5728 change \u4e8b\u4ef6\u4e2d\u76f4\u63a5\u5904\u7406\u56fe\u7247\u4e3a base64 \u7f16\u7801\uff0c\u7136\u540e\u8bf7\u6c42\u540e\u53f0\u63a5\u53e3\u3002<\/p>\n\n\n\n
\u503c\u5f97\u6ce8\u610f\u7684\u662f FileReader \u7684\u5b9e\u4f8b\u4e3a\u5f02\u6b65\u65b9\u6cd5\uff0c\u6240\u4ee5\u4e0a\u9762\u4ee3\u7801\u5bf9 FileReacer \u505a\u4e86 Promise \u7684\u5c01\u88c5\uff0c\u81f3\u4e8e\u4e0d\u4e86\u89e3 Promise \u7684\u5c0f\u4f19\u4f34\u8bf7\u81ea\u884c\u767e\u5ea6\u77e5\u8bc6\u76f2\u533a\u3002<\/p>\n\n\n\n
\n\n\n\n\u6587\u4ef6\u4e0a\u4f20\u7f29\u7565\u56fe<\/h2>\n\n\n\n
\u501f\u52a9 base64 \u7f16\u7801 \u5b9e\u73b0\u6587\u4ef6\u7f29\u7565\u56fe\u6548\u679c<\/p>\n\n\n\n
\u5b9e\u73b0\u7ed3\u679c<\/h3>\n\n\n\n<\/div><\/figure>\n\n\n\n\u5b9e\u73b0\u903b\u8f91<\/h3>\n\n\n\n
\u5c06\u6587\u4ef6 \u7f16\u7801\u4e3abase64\uff0c\u590d\u5236\u7ed9 img \u5143\u7d20<\/p>\n\n\n\n
html<\/h4>\n\n\n\n <div class=\"container\">
<div class=\"buttonContainer\">
<input type=\"file\" id=\"inputInput\">
<div class=\"button-select button\">\u9009\u62e9\u6587\u4ef6<\/div>
<div class=\"button-submit button\">\u4e0a\u4f20\u6587\u4ef6<\/div>
<\/div>
<div>
<img src=\"\" alt=\"\" id=\"img\">
<\/div>
<\/div><\/code><\/pre>\n\n\n\njavascript<\/h4>\n\n\n\nlet inputInput = document.querySelector(\"#inputInput\")
let select = document.querySelector(\".button-select\")
let submit = document.querySelector(\".button-submit\")
let img = document.querySelector(\"#img\")
let filesData;
\u200b
\/\/ \u5c06\u6587\u4ef6\u8f6c\u6210base64
const toBase64 = (files)=>{
return new Promise((resolve,reject)=>{
let fileReader = new FileReader();
fileReader.readAsDataURL(files)
fileReader.onload=(event)=>{
resolve(event.target.result)
}
})
}
\u200b
\/\/ \u83b7\u53d6\u672c\u5730\u6587\u4ef6
inputInput.onchange=async ()=>{
let files = inputInput.files[0]
console.log(files)
if(files.size>2*1024*1024){
alert(\"\u6587\u4ef6\u6700\u5927\u652f\u63012MB\")
return
}
filesData = files;
let base64 = await toBase64(files);
console.log(\"base64\",base64)
img.src = base64
}
\/\/ \u89e6\u53d1\u4e0a\u4f20\u7684click\u4e8b\u4ef6
select.onclick = ()=>{
inputInput.click()
}
\/\/ \u63d0\u4ea4
submit.onclick = ()=>{
if(filesData){
let formData = new FormData();
formData.append(\"files\",filesData)
fetch(\"www.baidu.com\",{
method:\"POST\",
body:formData
}).then((response)=>{
console.log(response)
})
}
}<\/code><\/pre>\n\n\n\n
\n\n\n\n\u6587\u4ef6\u4e0a\u4f20\u8fdb\u5ea6\u7ba1\u63a7<\/h2>\n\n\n\n
\u4f7f\u7528 axios \u6216\u8005 \u539f\u751f XHR \u53d1\u8d77\u63a5\u53e3\u8bf7\u6c42\uff0c\u5176\u4e2d\u8fd9\u4e24\u4e2a\u5b9e\u4f8b\u4e2d\u63d0\u4f9b\u4e86 onUploadProgress \u5c5e\u6027\uff0c onUploadProgress \u4e3a\u4e00\u4e2a\u56de\u8c03\u51fd\u6570\uff0c\u76d1\u542c\u4e0a\u4f20\u72b6\u6001 \u5176\u4e2d loaded \u4e3a\u5f53\u524d\u4e0a\u4f20\u7684\u6570\u91cf\uff0ctotal \u4e3a\u6587\u4ef6\u603b\u91cf\u3002<\/p>\n\n\n\n
\u503c\u5f97\u6ce8\u610f\u7684\u662f\u65b0\u7684 fetch \u8bf7\u6c42\u65b9\u5f0f\uff0c\u65e0\u6cd5\u76d1\u542c\u6587\u4ef6\u4e0a\u4f20\u548c\u4e0b\u8f7d\u8fdb\u5ea6\u72b6\u6001<\/p>\n\n\n\n
\u5b9e\u73b0\u7ed3\u679c<\/h3>\n\n\n\n<\/div><\/figure>\n\n\n\n\u5b9e\u73b0\u65b9\u5f0f<\/h3>\n\n\n\nhtml<\/h4>\n\n\n\n <div class=\"container\">
<div class=\"buttonContainer\">
<input type=\"file\" id=\"inputInput\">
<div class=\"button-select button\">\u9009\u62e9\u6587\u4ef6<\/div>
<div class=\"button-submit button\">\u4e0a\u4f20\u6587\u4ef6<\/div>
<\/div>
<div>\u6587\u4ef6\u4ec5\u652f\u6301png\u683c\u5f0f\u7684\u6587\u4ef6<\/div>
<div class=\"progress\">
<div class=\"progressBar\" style=\"width: 10%;\"><\/div>
<\/div>
<\/div><\/code><\/pre>\n\n\n\njavascript<\/h4>\n\n\n\nlet inputInput = document.querySelector(\"#inputInput\")
let select = document.querySelector(\".button-select\")
let submit = document.querySelector(\".button-submit\")
let progressBar = document.querySelector(\".progressBar\")
let filesData;
\u200b
\u200b
\/\/ \u83b7\u53d6\u672c\u5730\u6587\u4ef6
inputInput.onchange=()=>{
let files = inputInput.files[0]
console.log(files)
if(files.type !== \"text\/plain\"){
alert(\"\u6587\u4ef6\u53ea\u652f\u6301text\u683c\u5f0f\")
return
}
if(files.size>2*1024*1024){
alert(\"\u6587\u4ef6\u6700\u5927\u652f\u63012MB\")
return
}
filesData = files
}
\/\/ \u89e6\u53d1\u4e0a\u4f20\u7684click\u4e8b\u4ef6
select.onclick = ()=>{
inputInput.click()
}
\/\/ \u63d0\u4ea4
submit.onclick = ()=>{
if(filesData){
let formData = new FormData();
formData.append(\"files\",filesData)
axios({
method:\"POST\",
url:\"https:\/\/jsonplaceholder.typicode.com\/posts\/\",
data:formData,
onUploadProgress:(ev)=>{
let {loaded,total} = ev;
progressBar.style.width = `${loaded\/total*100}%`
}
}).then((response)=>{
console.log(response)
})
}
}<\/code><\/pre>\n\n\n\n
\n\n\n\n\u591a\u6587\u4ef6\u4e0a\u4f20\u53ca\u8fdb\u5ea6\u7ba1\u63a7<\/h2>\n\n\n\n
\u540c\u5355\u6587\u4ef6\u5b9e\u73b0\u601d\u8def\u4e00\u6837\uff0c\u591a\u6587\u4ef6\u4e0a\u4f20\u9488\u5bf9\u6bcf\u4e2a\u6587\u4ef6\u8fdb\u884c\u8fdb\u5ea6\u7ba1\u63a7\u7684\u65b9\u6848\u5728\u4e8e\uff0c\u6bcf\u4e00\u4e2a\u6587\u4ef6\u90fd\u4f1a\u5355\u72ec\u8bf7\u6c42\u4e00\u6b21\u63a5\u53e3\u3002<\/p>\n\n\n\n
\u4f18\u70b9\uff1a\u53ef\u4ee5\u5bf9\u6bcf\u4e00\u4e2a\u6587\u4ef6\u8fdb\u884c\u7ba1\u63a7\uff0c\u5e76\u4e14\u4f1a\u964d\u4f4e\u6587\u4ef6\u4e0a\u4f20\u5230\u5bb9\u91cf<\/p>\n\n\n\n
\u7f3a\u70b9\uff1a\u4f1a\u91cd\u590d\u591a\u6b21\u7684\u8c03\u7528\u4e00\u4e2a\u63a5\u53e3\uff0c\u5bf9\u63a5\u53e3\u548c\u670d\u52a1\u5668\u9020\u6210\u7684\u538b\u529b\u8f83\u5927<\/p>\n\n\n\n
\u9488\u5bf9\u4e8e\u5408\u5e76\u591a\u6587\u4ef6\u8bf7\u6c42\u7684\u65b9\u5f0f\u4e4b\u524d\u5728 element \u6a21\u5757\u4e2d\u300a\u6587\u4ef6\u4e0a\u4f20\u300b\u4e2d\u603b\u7ed3\u8fc7 \u5b9e\u73b0\u7684\u65b9\u6cd5\uff0c \u611f\u5174\u8da3\u7684\u5c0f\u4f19\u4f34\u53ef\u4ee5\u79fb\u6b65\u53bb\u53e6\u4e00\u7bc7\u6587\u7ae0<\/p>\n\n\n\n
\u5b9e\u73b0\u7ed3\u679c\uff1a<\/h3>\n\n\n\n<\/div><\/figure>\n\n\n\n\u5b9e\u73b0\u65b9\u5f0f<\/h3>\n\n\n\nhtml<\/h4>\n\n\n\n <div class=\"container\">
<div class=\"buttonContainer\">
<input type=\"file\" id=\"inputInput\" multiple>
<div class=\"button-select button\">\u9009\u62e9\u6587\u4ef6<\/div>
<div class=\"button-submit button\">\u4e0a\u4f20\u6587\u4ef6<\/div>
<\/div>
<div>\u6587\u4ef6\u4ec5\u652f\u6301png\u683c\u5f0f\u7684\u6587\u4ef6<\/div>
<div>
<ul id=\"list\">
<\/ul>
<\/div>
<\/div><\/code><\/pre>\n\n\n\njavascript<\/h4>\n\n\n\nlet inputInput = document.querySelector(\"#inputInput\")
let select = document.querySelector(\".button-select\")
let submit = document.querySelector(\".button-submit\")
let list = document.querySelector(\"#list\")
let filesData;
\u200b
\/\/ \u83b7\u53d6\u672c\u5730\u6587\u4ef6
inputInput.onchange=()=>{
filesData =Array.from(inputInput.files)
console.log(\"\u591a\u6587\u4ef6\u4e0a\u4f20\",filesData)
filesData.map((item)=>{
list.innerHTML+= `
<li>
${item.name}
<div class=\"progress\">
<div class=\"progressBar\" data-name=\"${item.name}\" style=\"width:10%\"><\/div>
<\/div>
<\/li>
`
})
}
\/\/ \u89e6\u53d1\u4e0a\u4f20\u7684click\u4e8b\u4ef6
select.onclick = ()=>{
inputInput.click()
}
\/\/ \u63d0\u4ea4
submit.onclick = ()=>{
console.log(filesData)
if(filesData.length){
filesData.map((item)=>{
let formData = new FormData();
formData.append(\"files\",item)
axios({
method:\"POST\",
url:\"https:\/\/jsonplaceholder.typicode.com\/posts\/\",
data:formData,
onUploadProgress:(ev)=>{
let el = document.querySelector(`div[data-name=\"${item.name}\"]`)
let {loaded,total} = ev;
el.style.width = `${loaded\/total*100}%`
}
}).then((response)=>{
console.log(response)
})
})
}
}<\/code><\/pre>\n\n\n\n\u4e0a\u9762 JS \u7684\u5b9e\u73b0\u903b\u8f91\u4e3a \u6bcf\u4e00\u4e2a li \u5143\u7d20\u7ed1\u5b9a\u552f\u4e00\u7684 \u81ea\u5b9a\u4e49\u5c5e\u6027\u76ee\u524d\u4ee5\u4e3a\u6587\u4ef6\u540d\u79f0\u4f5c\u4e3a\u552f\u4e00\u503c\uff0c\u5728\u8c03\u7528\u63a5\u53e3\u7684\u4e2d\u76d1\u542c onUploadProgress \u5229\u7528\u5f53\u524d\u7684 file \u5bf9\u8c61\u7684 name \u5c5e\u6027\uff0c\u627e\u5230\u76f8\u5bf9\u7684 DOM \u8282\u70b9\uff0c\u8ba1\u7b97\u8fdb\u5ea6\u5e76\u8d4b\u503c\u3002<\/p>\n\n\n\n
\n\n\n\n\u62d6\u62fd\u4e0a\u4f20<\/h2>\n\n\n\n
\u62d6\u62fd\u4e0a\u4f20\u7684\u5b9e\u73b0\u65b9\u5f0f \u4e3b\u8981\u4e8e\u501f\u52a9\u4e86 H5 \u7684API dragover \\ drop \u65b9\u6cd5\uff0c\u7528\u6765\u76d1\u542c\u5728\u6b64\u533a\u57df\u5185\u7684\u9f20\u6807\u79fb\u52a8\u548c\u653e\u4e0b\u4e8b\u4ef6\u3002<\/p>\n\n\n\n
\u5b9e\u73b0\u7ed3\u679c<\/h3>\n\n\n\n<\/div><\/figure>\n\n\n\n\u5b9e\u73b0\u65b9\u5f0f<\/h3>\n\n\n\nhtml<\/h4>\n\n\n\n <div class=\"container\" id=\"upWrapper\">
<div class=\"content\">
<img src=\".\/img\/\u4e0a\u4f20.png\" alt=\"\">\\
<\/div>
<\/div><\/code><\/pre>\n\n\n\njavascript<\/h4>\n\n\n\nlet upWrapper = document.querySelector(\"#upWrapper\")
\/\/ \u8fdb\u5165\u4e8b\u4ef6
upWrapper.addEventListener(\"dragover\",(event)=>{
event.preventDefault();
})
\/\/ \u653e\u7f6e\u4e8b\u4ef6
upWrapper.addEventListener(\"drop\",(event)=>{
event.preventDefault();
submit(event.dataTransfer.files)
})
\/\/ \u63d0\u4ea4\u4e8b\u4ef6
const submit = (filesData)=>{
let formData = new FormData();
formData.append(\"files\",filesData)
axios({
method:\"POST\",
url:\"https:\/\/jsonplaceholder.typicode.com\/posts\/\",
data:formData,
}).then((response)=>{
console.log(response)
})
}<\/code><\/pre>\n\n\n\n\u4e0a\u9762 js \u7684\u4e3b\u8981\u903b\u8f91\u4e3a\uff0c \u5728 drop \u4e8b\u4ef6\u4e2d\u83b7\u53d6 \u6587\u4ef6\u7684\u5c5e\u6027 event.dataTransfer.files \uff0c\u7136\u540e\u5c06\u6587\u4ef6\u5c5e\u6027\u4f20\u7ed9\u670d\u52a1\u7aef\u3002<\/p>\n\n\n\n
\n\n\n\n\u5927\u6587\u4ef6\u4e0a\u4f20\u548c\u65ad\u70b9\u7eed\u4f20<\/h2>\n\n\n\n
\u5728\u4e00\u4e9b\u4e1a\u52a1\u9700\u6c42\u4e2d\uff0c\u9700\u8981\u7528\u6237\u4e0a\u4f20\u4e00\u4e9b\u5927\u5bb9\u91cf\u89c6\u9891\uff0c\u8fd9\u65f6\u7528\u4f20\u7edf\u7684\u6587\u4ef6\u4e0a\u4f20\u65b9\u5f0f\u4f1a\u9020\u6210\u4f20\u8f93\u6548\u7387\u53d8\u6162\u7684\u95ee\u9898\u3002\u5728\u4e0a\u4f20\u6587\u4ef6\u8fc7\u7a0b\u4e2d\u4e00\u65e6\u51fa\u73b0\u4e0a\u4f20\u5931\u8d25\uff0c\u5c31\u9700\u8981\u91cd\u65b0\u5c06\u6587\u4ef6\u6574\u4e2a\u91cd\u65b0\u4e0a\u4f20\u4e00\u904d\u3002\u8fd9\u6837\u5728\u65e0\u8bba\u662f\u7528\u6237\u63d0\u4f53\u9a8c\u8fd8\u662f\u670d\u52a1\u7aef\u90fd\u662f\u4e00\u79cd\u65f6\u95f4\u548c\u8d44\u6e90\u7684\u6d6a\u8d39\u3002<\/p>\n\n\n\n
\u5728\u89c2\u5bdf\u4e00\u4e9b\u5b58\u50a8\u5927\u5382\uff0c\u6bd4\u5982\u4e03\u725b\u4e91\u3001\u767e\u5ea6\u4e91\u76d8\u7b49\u670d\u52a1\u5546\uff0c\u4ed6\u4eec\u5728\u4e0a\u4f20\u548c\u4e0b\u8f7d\u7684\u65f6\u5019\u4f1a\u628a\u6587\u4ef6\u788e\u7247\u5316\uff0c\u8fd9\u6837\u4e0d\u4ec5\u53ef\u4ee5\u5927\u5927\u63d0\u9ad8\u4f20\u8f93\u901f\u5ea6\uff0c\u4e14\u4e5f\u517c\u5bb9\u7684\u65ad\u7535\u7eed\u4f20\u7684\u529f\u80fd\uff0c\u5373\u6587\u4ef6\u4e0a\u4f20\u5931\u8d25\uff0c\u7cfb\u7edf\u5bf9\u81ea\u52a8\u68c0\u7d22\u5931\u8d25\u7684\u6587\u4ef6\u788e\u7247\uff0c\u7b49\u5f85\u7528\u6237\u91cd\u65b0\u4e0a\u4f20\u8be5\u6587\u4ef6\u65f6\u4f1a\u81ea\u52a8\u771f\u7504\u522b\u5931\u8d25\u7684\u6587\u4ef6\u788e\u7247\u8fdb\u884c\u4e0a\u4f20\u3002<\/p>\n\n\n\n
\u4e0b\u9762\u5c31\u4ecb\u7ecd\u4e0b\u524d\u7aef\u662f\u5982\u4f55\u5b9e\u73b0\u5927\u6587\u4ef6\u4e0a\u4f20\u548c\u65ad\u70b9\u7eed\u4f20\u7684<\/p>\n\n\n\n<\/div><\/figure>\n\n\n\n\u5b9e\u73b0\u7684\u6280\u672f\u70b9<\/h3>\n\n\n\n\n- \u9700\u8981\u501f\u52a9 FileReader \u5b9e\u4f8b\u5bf9\u8c61\u8fdb\u884c Budder \u7684\u8f6c\u6362<\/li>\n\n\n\n
- \u9700\u8981\u4f7f\u7528\u7b2c\u4e09\u653e Spark-md5 \u6765\u751f\u6210HASH<\/li>\n\n\n\n
- \u9700\u8981\u4f7f\u7528\u6b63\u5219\u83b7\u53d6\u6587\u4ef6\u7684\u6269\u5c55\u540d\uff0c\u540e\u671f\u548c\u7ed3\u5408 HASH \u503c\u5408\u5e76\u6210\u4e00\u4e2a\u65b0\u7684\u6587\u4ef6\u540d\u79f0\uff08\u4e0a\u56fe\u6240\u793a\uff09<\/li>\n\n\n\n
- \u9700\u8981\u501f\u52a9 file \u5bf9\u8c61\u4e2d\u7684 slice \u65b9\u6cd5\u5bf9\u6587\u4ef6\u5207\u5272\uff1b\u4f7f\u7528\u65b9\u6cd5\u548c\u6570\u7ec4\u7684 slice \u53c2\u6570\u4e00\u81f4<\/li>\n<\/ul>\n\n\n\n
\u4ee3\u7801\u5b9e\u73b0<\/h3>\n\n\n\nHTML<\/h4>\n\n\n\n <div class=\"container\">
<div class=\"buttonContainer\">
<input type=\"file\" id=\"inputInput\">
<div class=\"button-select button\">\u9009\u62e9\u6587\u4ef6<\/div>
<div class=\"button-submit button\">\u4e0a\u4f20\u6587\u4ef6<\/div>
<\/div>
<div>\u6587\u4ef6\u4ec5\u652f\u6301png\u683c\u5f0f\u7684\u6587\u4ef6<\/div>
<div class=\"progress\">
<div class=\"progressBar\" style=\"width: 10%;\"><\/div>
<\/div>
<\/div><\/code><\/pre>\n\n\n\njavascript<\/h4>\n\n\n\nlet inputInput = document.querySelector(\"#inputInput\")
let select = document.querySelector(\".button-select\")
let submit = document.querySelector(\".button-submit\")
let progressBar = document.querySelector(\".progressBar\")
let chunks=[]; \/\/ \u5207\u7247\u7684\u96c6\u5408
\u200b
\/\/ \u751f\u6210\u6587\u4ef6Buffer\u7684\u5c01\u88c5
const changeBuffer = (file)=>{
return new Promise((resolve)=>{
let fileReader = new FileReader();
fileReader.readAsArrayBuffer(file);
fileReader.onload = (event)=>{
\/\/ \u6839\u636e\u6587\u4ef6\u5185\u5bb9\u751f\u6210HASH\u503c
let bufferData = event.target.result;
let spark = new SparkMD5.ArrayBuffer();
let HASH; \/\/ \u6587\u4ef6\u7684Hash\u540d
let suffix; \/\/\u83b7\u53d6\u6587\u4ef6\u540e\u7f00\u540d
spark.append(bufferData);
HASH = spark.end();
suffix = file.name.replace(\/.+\\.\/, \"\");
resolve({
bufferData,
HASH,
suffix,
fileName:`${HASH}.${suffix}`
})
}
})
}
\u200b
\/\/ \u83b7\u53d6\u672c\u5730\u6587\u4ef6
inputInput.onchange= async ()=>{
let files = inputInput.files[0]
let {HASH,suffix,bufferData,fileName} = await changeBuffer(files);
let section = []; \/\/\u6587\u4ef6\u5207\u7247\u4e0a\u4f20\u7684\u8bb0\u5f55
\/*\u6587\u4ef6\u5207\u7247\u5904\u7406(\u4ee5\u56fa\u5b9a\u5927\u5c0f\u4e0a\u4f20\u4f18\u5148,\u5982\u679c\u5207\u7247\u6570\u91cf\u8fc7\u5927,\u5c31\u91c7\u7528\u56fa\u5b9a\u6570\u91cf)*\/
let max = 1024*100 \/\/ \u6bcf\u4e2a\u6587\u4ef6\u6700\u5927\u5728100KB
let count = Math.ceil(files.size \/ max); \/\/ \u4e00\u5171\u8981\u6709\u591a\u5c11\u5207\u7247
\/*\u8d85\u8fc7100\u4e2a\u5207\u7247,\u5c31\u91c7\u7528\u56fa\u5b9a\u6570\u91cf\u65b9\u5f0f\u4e0a\u4f20*\/
if(count>100){
max = files.size \/ 100;
count = 100;
}
for(let index=0;index<count;index++){
chunks.push({
file:files.slice(index*max,max*(index+1)),
fileName:`${HASH}_${index+1}.${suffix}`
})
}
}
\u200b
\/\/ \u89e6\u53d1\u4e0a\u4f20\u7684click\u4e8b\u4ef6
select.onclick = ()=>{
inputInput.click()
}
\u200b
\/\/ \u63d0\u4ea4
submit.onclick = ()=>{
\/\/ \u4e0a\u4f20\u6210\u529f\u7684\u5904\u7406
let ChunkState = [];
const upSuccess = (state)=>{
ChunkState.push(state);
\/\/ \u5224\u65ad\u662f\u5426\u5168\u90e8\u4e3atrue
let ChunkStateEvery = ChunkState.every((item)=>{return item==true})
if(chunks.length === ChunkState.length){
if(ChunkStateEvery){
\/\/ \u8c03\u7528\u540e\u53f0\u63a5\u53e3 \u901a\u77e5\u670d\u52a1\u5668\u53ef\u4ee5\u5bf9\u6587\u4ef6\u8fdb\u884c\u5408\u5e76
\/\/...
alter(\"\u6587\u4ef6\u4e0a\u4f20\u6210\u529f\")
}else{
alter(\"\u6587\u4ef6\u4e0a\u4f20\u51fa\u9519\u6210\u91cd\u65b0\u4e0a\u4f20\")
}
}
\/\/ \u66f4\u65b0\u8fdb\u5ea6\u6761
progressBar.style.width = `${count(ChunkState,true)\/chunks.length*100}%`
}
\/\/ \u5faa\u73af\u5207\u7247\u96c6\u5408\u9010\u4e2a\u8bf7\u6c42
chunks.map((item)=>{
let formData = new FormData();
formData.append(\"files\",item.file)
formData.append(\"fileName\",item.fileName)
axios({
method:\"POST\",
url:\"https:\/\/jsonplaceholder.typicode.com\/posts\/\",
data:formData,
}).then((response)=>{
if(response.code == 200){
upSuccess(true);
}
}).catch(()=>{
upSuccess(false);
})
})
}
\u200b
\/\/ \u7b97\u6cd5\u5c01\u88c5\u67e5\u627e\u6570\u7ec4\u4e2d\u67d0\u4e2a\u5143\u7d20\u51fa\u73b0\u7684\u6b21\u6570
const count = (arr, item)=>{
var count = 0;
arr.forEach((e)=> item === e ? count++:0);
return count;
}<\/code><\/pre>\n\n\n\n
\n\n\n\n\u5927\u6587\u4ef6\u5207\u7247\u4e0a\u4f20\u524d\u540e\u7aef\u6574\u4f53\u5b9e\u73b0\u903b\u8f91<\/h2>\n\n\n\n
\u6574\u4f53\u6d41\u7a0b\u53ef\u53c2\u8003\u4e0a\u65b9\u6d41\u7a0b\u56fe\uff0c\u6587\u4ef6\u91c7\u53d6 steam \u6d41\u65b9\u5f0f\u4f20\u9012\u7ed9\u540e\u7aef<\/p>\n\n\n\n
![\"\"\/](\"https:\/\/raw.githubusercontent.com\/gongjianOnline\/ImgHosting\/main\/img\/1650952479(1).png\")
<\/div><\/figure>\n\n\n\n![\"\"\/](\"https:\/\/raw.githubusercontent.com\/gongjianOnline\/ImgHosting\/main\/img\/1650952842(1).png\")
<\/div><\/figure>\n\n\n\n![\"\"\/](\"https:\/\/raw.githubusercontent.com\/gongjianOnline\/ImgHosting\/main\/img\/1650953031(1).png\")
<\/div><\/figure>\n\n\n\n![\"\"\/](\"https:\/\/raw.githubusercontent.com\/gongjianOnline\/ImgHosting\/main\/img\/1650959010(1).png\")
<\/div><\/figure>\n\n\n\n![\"\"\/](\"https:\/\/raw.githubusercontent.com\/gongjianOnline\/ImgHosting\/main\/img\/1650962184(1).png\")
<\/div><\/figure>\n\n\n\n![\"\"\/](\"https:\/\/raw.githubusercontent.com\/gongjianOnline\/ImgHosting\/main\/img\/%E6%97%A0%E6%A0%87%E9%A2%98-2022-04-27-1017.png\")
<\/div><\/figure>\n\n\n\n