文件切片，斷點(diǎn)續(xù)傳－解決上傳大文件的問題

varimgURL?=?URL.createObjectURL(file);

ctx.drawImage(imgURL,?0,?0);

//?獲取圖片的編碼，然后將圖片當(dāng)做是一個(gè)很長的字符串進(jìn)行傳遞

vardata=?canvas.toDataURL(?"image/jpeg",?0.5);

在服務(wù)端需要做的事情也比較簡單，首先解碼base64，然后保存圖片即可

$imgData?=?$_REQUEST[?'imgData'];

$base64?=?explode(?',',?$imgData)[?1];

$img?=?base64_decode($base64);

$url?=?'./test.jpg';

if(file_put_contents($url,?$img))?{
exit(json_encode(?array(

url?=>?$url

)));

}

//?讀取二進(jìn)制文件

functionreadBinary(text){
vardata?=?newArrayBuffer(text.length);

varui8a?=?newUint8Array(data,?0);

for(?vari?=?0;?i?ui8a[i]?=?(text.charCodeAt(i)?&?0xff);

}

console.log(ui8a)

}

varreader?=?newFileReader;

reader.?=?function{
readBinary(?this.result)?//?讀取result或直接上傳

}

//?把從input里讀取的文件內(nèi)容，放到fileReader的result字段里

reader.readAsBinaryString(file);

formData異步上傳

letfiles?=?e.target.files?//?獲取input的file對(duì)象

letformData?=?newFormData;

formData.append(?'file',?file);

axios.post(url,?formData);

服務(wù)端處理方式與直接form表單請求基本相同。

iframe無刷新頁面

在低版本的瀏覽器（如IE）上，xhr是不支持直接上傳formdata的，因此只能用form來上傳文件，而form提交本身會(huì)進(jìn)行頁面跳轉(zhuǎn)，這是因?yàn)閒orm表單的target屬性導(dǎo)致的，其取值有

_self，默認(rèn)值，在相同的窗口中打開響應(yīng)頁面

_blank，在新窗口打開

_parent，在父窗口打開

_top，在最頂層的窗口打開

framename，在指定名字的iframe中打開

functionupload{
varnow?=?+?newDate

varid?=?'frame'+?now

$(?"body").append(?`"display:none;"?name="${id}"?id="${id}"?/>`);

var$form?=?$(?"#myForm")

$form.attr({
"action":?'/index.php',

"method":?"post",

"enctype":?"multipart/form-data",

"encoding":?"multipart/form-data",

"target":?id

}).submit

$(?"#"+id).on(?"load",?function{
varcontent?=?$(?this).contents.find(?"body").text

try{
vardata?=?JSON.parse(content)

}?catch(e){
console.log(e)

}

})

}

長按二維碼，掃掃關(guān)注哦