欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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 作为文件上传的实例代码解析,希望对大家有所帮助