JavaScript Base64 作为文件上传的实例代码解析
程序员文章站
2023-11-05 20:47:16
例如我们用某些 裁剪插件 得到的图片是
例如我们用某些 裁剪插件 得到的图片是
<img src="data:image/png;base64,ivborw0kggoaaaansuheugaaaaeaaaakcayaaabidfamaaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaahhjrefueno8zjsoxcambfb/ keauffr0cbng3nqpw68arzdalozpppfibhh5eab8b+tlt9myq6i1buqfaq1cksvcxz2acs6406kugpt5/ lckuvgz5bdcsb13zo99zodczgvt4mjjzmvkqcha68iiepb86gaiov8cdadliuqbs7md3waaaabjru5erkjggg==">
这样的，那这样的文件怎样在from 表单上传（当然我是举例，大部分的裁剪插件都是有内置的）
首先需要 吧 base64 流转换成 blob 对象，文件对象都继承它。
函数如下：
function getblobbydatauri(datauri,type) {
var binary = atob(datauri.split(',')[1]);
var array = [];
for(var i = 0; i < binary.length; i++) {
array.push(binary.charcodeat(i));
}
return new blob([new uint8array(array)], {type:type });
}
那么剩下的就作为文件上传就ok
var $blob= getblobbydatauri(base64data,'image/png');
var formdata = new formdata();
formdata.append("files", $blob ,"file_"+date.parse(new date())+".png");
全部代码是这样子的：
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>上传用例</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<script type="text/javascript">
/**
* 根据base64 内容 取得 bolb
*
* @param datauri
* @returns blob
*/
function getblobbydatauri(datauri,type) {
var binary = atob(datauri.split(',')[1]);
var array = [];
for(var i = 0; i < binary.length; i++) {
array.push(binary.charcodeat(i));
}
return new blob([new uint8array(array)], {type:type });
}
/**
* 上传
*/
function upload(){
//base64 转 blob
var $blob= getblobbydatauri(document.getelementsbytagname("img")[0].currentsrc,'image/jpeg');
var formdata = new formdata();
formdata.append("files", $blob ,"file_"+date.parse(new date())+".jpeg");
//组建xmlhttprequest 上传文件
var request = new xmlhttprequest();
//上传连接地址
request.open("post", "www.xxx.com");
request.onreadystatechange=function()
{
if (request.readystate==4)
{
if(request.status==200){
console.log("上传成功");
}else{
console.log("上传失败,检查上传地址是否正确");
}
}
}
request.send(formdata);
}
</script>
</head>
<body>
<button onclick="upload()">上传测试</button>
<br />
上传的图片:
<img src="data:image/jpeg;base64,/9j/4aaqskzjrgabaqeaeab4aad/4qairxhpzgaatu0akgaaaagaaqesaamaaaabaaeaaaaaaad/2wbdabssfbcuersxfhcehbsgkeirkculkfe6ptbcyfvlzf9vxvtqejmbangqc1tdhbwgkj6jq62rz4c8ybqmx5moq6t/waalcabqadebarea/8qaggaaawadaqaaaaaaaaaaaaaaawqfaaecbv/eadqqaaibawmcagcgbwaaaaaaaaecawaeequsitfbe1evimfxgahwbimykbhrfejdcokiwf/aaagbaqaapwd0tc5agc1muftbyw7ffemrdtgm/ohp9pbnmunhogbo7qap1p60vra8z4e6ur1hcfcmvrkhc3edrbjni2fuznsirexwr41w7xw38ksnbyebe/686o2ljawwpgqxqemryt8ao8utqvejwhkqklzahduas0y28/vsh9x3eex17knpwopc+lb3kblidhwohhmko5qpqy9iajb6em+go8ax2jsk71dmhw2ticxrcscnivukeuknw2mnyxc1rbjcrzxanxd/uijwajdxkvlbriqsxcsxka5wcrx7edq7i4i024kxxv3pmugkytld8vlp5ufuhcxunaimveueydqqervmpthg61qjhqpdh+p/anl+0f1eu1gskbb42izhh0pa2mqsho3a1h38plgvrmk3ppj24tpbhbktl2hwon47/hmg3fnpduxbthbyyda0xldbr34hsouvrclsiylodjoo+fp+tu6+b0zq63ph3e6iou4/cex+vwi5fkumrag9co9bvenlgzlaury54yjokniy1shppkm/4d9qqqwcgoctgz46mpn4w1hwle1tlly+lifb2fwkhpbhcxthkgzwgccki2y3fnqbwdlj40cgm6yf0xnod9frv+sqprt1ewsg6ebizgnl3xnspr/toaxzqwdufhbfv9znpvj503trrapeg0hgllkita0xzick5p0ttgkzfdmhjniekrdyommomaygjiykijxaqdcjocci1ql5ruggqrt4hcjdhi2fj4a1w2oqqmsj1hm1vib+ekjldrquelbycmh24x3z86wxwljtv3ydchfl14x2ppwmra4juyemiiksm9c49nvo9aqxdyphf+lgwxbhsobesqdc8ywpns5vnvrdgk6un2dttjox8wtinj3dzfmhucrsiqscqhacc5x1hgaqwyiafi2uoywcslsx8orwbu5b8/3qrpxjs4zurlx6hqear24pnn1qlxhlnkkykcdpclzv/upl7pn2ocvm8uzksbjd7mgayccxibhfrw/4eaa4es2xqiigcknde8noowfci0mjeawyipcgmw5ljycr2ypi96ztibbwscabdsudpnr6/9k=" />
</body>
</html>
以上所述是小编给大家介绍的javascript base64 作为文件上传的实例代码解析，希望对大家有所帮助
上一篇： 通过JS深度判断两个对象字段相同
下一篇： 胃酸过多吃什么好，你都知道吗