例如我们用某些裁剪插件得到的图片是,
& lt; img src="数据:图像/png; base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b + Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg==北?之前
这样的,那这样的文件怎样在从表单上传(当然我是举的例,大部分的裁剪插件都是有内置的)
首先需要吧base64流转换成blob对象,文件对象都继承它。
函数如下:
函数getBlobBydataURI (dataURI类型){
var二进制=atob (dataURI.split (" ") [1]);
var=[]数组;
(var=0;我& lt;binary.length;我+ +){
array.push (binary.charCodeAt (i));
}
返回新Blob(新Uint8Array(数组)],{类型:类型});
}
那么剩下的就作为文件上传就好
var $ Blob=getBlobBydataURI (base64Data '/png图像');
var formData=https://www.yisu.com/zixun/new formData ();
formData。追加(“文件”,Blob美元,“file_”+日期。解析(新日期())+ . png);之前
全部代码是这样子的:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title>上传用例& lt;/title>
& lt;元内容='宽度=设备宽度,初始=1,最大范围=1,user-scalable=没有' name=笆哟啊北?
& lt;脚本type=" text/javascript祝辞/* *
*根据base64内容取得bolb
*
* @param dataURI
* @returns Blob
*/函数getBlobBydataURI (dataURI类型){
var二进制=atob (dataURI.split (" ") [1]);
var=[]数组;
(var=0;我& lt;binary.length;我+ +){
array.push (binary.charCodeAt (i));
}
返回新Blob(新Uint8Array(数组)],{类型:类型});
}/* *
*上传
*/函数上传(){//base64转团
var $ Blob=getBlobBydataURI (document.getElementsByTagName (img) [0] .currentSrc,图像/jpeg);
var formData=https://www.yisu.com/zixun/new formData ();
formData。追加(“文件”,Blob美元,“file_”+日期。解析(新日期())+“jpeg”);//组建XMLHttpRequest上传文件
var=new XMLHttpRequest请求();//上传连接地址
请求。打开(“文章”、“www.xxx.com”);
request.onreadystatechange=function ()
{
如果(request.readyState==4)
{
如果(request.status==200) {
console.log(“上传成功”);
其他}{
console.log(“上传失败,检查上传地址是否正确”);
}
}
}
request.send (formData);
}
& lt;/script>
& lt;/head>
& lt; body>
& lt; button>上传测试& lt;/button>
& lt; br/比;
上传的图片:
& lt; img src="数据:图像/jpeg, base64/9 j/4 aaqskzjrgabaqeaeab4aad/4 qairxhpzgaatu0akgaaaagaaqesaamaaaabaaeaaaaaaad/2 wbdabssfbcuersxfhcehbsgkeirkculkfe6ptbcyfvlzf9vxvtqejmbangqc1tdhbwgkj6jq62rz4c8ybqmx5moq6t/wAALCABQADEBAREA/8 qaggaaawadaqaaaaaaaaaaaaaaawqfaaecbv/EADQQAAIBAwMCAgcGBwAAAAAAAAECAwAEEQUSITFBE1EVImFxgaHwBiMykbHRFEJDcoKiwf/aAAgBAQAAPwD0tc5AGc1MuftBYW7FfEMrDtGM/Ohp9pbNmUNHOgbo7qAP1p60vra8z4E6uR1HcfCmVrKHc3EdrBJNI2FUZNSIreXWR41w7xW38kSnBYebe/686 o2ljawwpgqxqemryt8ao8utqvejwhkqklzahduas0y28/VSh9X3EeX17KNpWoPc + Lb3KBLiDhwOhHmKo5qPqY9Iajb6eM + Go8aX2jsK71dmhW2tIcxrcSCNivUKeuKnw2mnyXc1rbJcRzxAnxd/UijwajdXkVlbrIqSXCsXkA5wCRx7eDQ7i4i024KxXV3PMuGKytlD8vLP5UfUHCXunaimVEuEYDqQeRVmpthg61qjHqPDH + p/退火+ 0 f1eu1gskbb42izhh0pa2mqsho3a1h48plgvrmk3ppj24tpbhbktl2hwon47/Hmg3FnPduxbThbyyDa0xlDBR34HsouvRCLSIYlOdjoo + FP + tU6 + b0Zq63pH3E6iOU4/Cex + VWI5FkUMrAg9CO9BvEnlgZLaURy54YjOKniy1sHPpKM/4 d9qqqwcgoctgz46mpn4w1hwle1tlly + LIfb2FWKHPBHcxtHKgZWGCCKi2y3FnqbWdlJ40CgM6yf0xnoD9frV + sqPrt1eWsG6EbIzgNL3XnsPr/tOaXZQWduFhbfv9ZnPVj503trrApeG0hgllkiTa0xzIck5P0TTGKzFDmhjnieKRdyOMMOmayGJIYkijXaqDCjOcCi1ql5ruGGQRt4hcjdhI2fj4A1w2oQqMsJ1Hm1vIB + eKJLdRQuElbYCMh34X3Z86WXWLJtv3yDchfl14x2PPWmra4juYEmiIKsM9c49nvo9aqXdyPHf + LGWXbHsObeSQdc8YwPnS5vnvrdgk6uN2DttJOx8wTinJ3dZFmhuCrSIQscqHacc5x1HGaQWYiaFI2UoYWCsLSX8ORwBu5B8/3qrpxJs4zuRlx6hQEAr24PNN1qlXhlnkKykCDPCLzv/uPl7Pn2ocVm8UZKSBJd7MGAyCCxIBHfrW/4 eaa4es2xqiigcknde8noowfci0mjeawyipcgmw5ljycr2ypi96ztibbwscabdsudpnr6/9k="/比;
& lt;/body>
& lt;/html>之前
以上所述是小编给大家介绍的JavaScript Base64作为文件上传的实例代码解析,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
