手工上传,下载(Blob,base64)

原创 2016年08月29日 20:53:35

一个插件

/**
 * ^.^
 */
;(function() {
function fun($) {
$.Image2Blob = function() {
   this.setId = _setId;
   this.setEvent = _setEvent;
   this.setCallBack = _setCallBack;
   this.fire = _fire;
   this.blob = _blob;
   this.base64 = _base64;
   this.fileName = _fileName;

   function _setId(id) {
      _id = id;
   }

   function _setEvent(event) {
      _event = event
   }

   function _setCallBack(handle) {
      _handle = handle
   }

   function _img2Base64(url, callback, outputFormat) {
      var canvas = document.createElement('CANVAS');
      var ctx = canvas.getContext('2d'); 
      var img = new Image; 
      img.crossOrigin = 'Anonymous';

      img.onload = function(){
        var width = img.width;
        var height = img.height;
        canvas.width = width; 
        canvas.height = height; 
        ctx.drawImage(img, 0, 0, width,height , 0, 0, width, height); 
        var dataURL = canvas.toDataURL(outputFormat || 'image/png'); 
        callback.call(this, dataURL); 
        canvas = null; 
      };

      img.src = url; 
    }

   function _getURL(file) {
      var url = null ; 
      if (window.createObjectURL!=undefined) { // basic
        url = window.createObjectURL(file) ;
      }
      else if (window.URL!=undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file) ;
      }
      else if (window.webkitURL!=undefined) { // web_kit or chrome
        url = window.webkitURL.createObjectURL(file) ;
      }

      return url ;
   }

   function _base64toBlob(dataurl) {
     var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
     bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);

      while(n--){
         u8arr[n] = bstr.charCodeAt(n);
      }

      return new Blob([u8arr], {type:mime});
   }

   function _callBack(value) {
      _base64Str = value;
      _blob = _base64toBlob(value);

      if(_handle != null) {
         _handle(_base64Str);
      }
   }

   function _blob() {
      return _blob;
   }

   function _base64() {
      return _base64Str;
   }

   function _fileName() {
      return _fileName;
   }

   function _fire() {
      _fileName = $('#' + _id).val();
      var imageUrl = _getURL($('#' + _id)[0].files[0]);
      _img2Base64(imageUrl, _callBack);
   }

   var _id; // input file id
   //var _event = 'change'; // response of the event
   var _handle; // call back method
   var _blob;
   var _base64Str;
   var _fileName;
 }
}

if(typeof define === "function") {
   define(function(require, exports, module) {
      var jQuery = require('jquery');
      fun(jQuery);
      module.exports = jQuery;
   });
}
else {
   fun(jQuery);
}
})()

一个方法

private void downLoad(HttpServletResponse resp, String fileName, String base64Str) {
    resp.setContentType("application/jar; charset=utf-8");
    resp.setHeader("extension", "jar");
    resp.setHeader("Content-Disposition", "attachment;filename=\"" + fileName + "\"");
    resp.setHeader("Pragma", "");
    resp.setHeader("Cache-Control", "");
    OutputStream out = null;

    try {
       Base64 base64 = new Base64();
       byte[] byteArray = base64.decode(base64Str);

       for (byte b : byteArray) {
          if(b<0) {
             b += 256;
          }
        }

       out = resp.getOutputStream();
       out.write(byteArray);
    }
    catch(IOException e) {
       e.printStackTrace();
    }
    finally {
       if(out != null) {
          try {
             out.close();
          }
          catch(IOException e) {
             // ignore it
          }
       }
    }
 }

一个实例

<script>
   var blob = new $.Image2Blob();
   blob.setId('image');
   blob.setCallBack(cb);

   $(function() {
      $('#image').bind('change', function() {
         blob.fire();
      });
   });

   // default val is base64 String
   function cb(val) {
      // user the params do someing
      var fileName = blob.fileName();
      var base64Str = blob.base64();
      var blob = blob.blob();
    }
</script>

利用Blob, a.download, URL.createObjectURL模拟下载文件

利用Blob对象创建文件
  • butterfly5211314
  • butterfly5211314
  • 2017年03月07日 11:23
  • 1812

Blob对象判断是不是图片类型以及Blob数据下载

H5中新增了Blob对象,代表原始二进制数据,file对象也继承了Blob对象。 Blob对象有2个属性,size是Blob对象长度,type是mime类型,如果未知类型返回空字符串 图像文件中Blo...
  • z5976749
  • z5976749
  • 2016年11月26日 23:37
  • 3513

blob,将byte二进制转成pdf

base64用于解码decode,加密的encode来源jar要一致。 解密前要把“ ”,变成“” 对于一些jar不能打入lib//jdkjar包加入用add aviralbale 没有就配置下, ...
  • y666666y
  • y666666y
  • 2017年04月17日 15:32
  • 1271

javascript base64 转化为blob

function b64toBlob(b64Data, contentType, sliceSize) {                contentType = contentType || ''...
  • csharp25
  • csharp25
  • 2018年01月06日 21:59
  • 463

base64与Blob互转以及Blob下载

当下载canvas生成的base64图片,当图片过大时会失败。这是我们可以把base64图片转成Blob二进制文件再下载~ //**dataURL to blo...
  • qq_39759115
  • qq_39759115
  • 2017年11月24日 15:05
  • 222

JS blob 文件(需要

  • 2015年07月13日 10:23
  • 4KB
  • 下载

Oracle使用存储过程下载Blob大对象

1. 创建存储过程 copy_blob_data_to_fileCREATE OR REPLACE PROCEDURE copy_blob_data_to_file( p_blob_id INTEGE...
  • u014199860
  • u014199860
  • 2015年07月07日 10:17
  • 581

base64转blob Ajax上传文件,服务器端接收不到

function convertBase64UrlToFileOrBlob(dataURI,type=0) { var arr = dataURI.split(','), mime = arr[0...
  • sunscheung
  • sunscheung
  • 2017年08月08日 15:28
  • 708

利用FileReader和FormData实现图片预览和上传(base64转二进制文件)

业务有个需求,要做图片预览上传,过去都是客户端上传给后端,后端返回 url 前端进行预览,现在其实可以不依赖后端做预览,最后在上传,这主要依赖 FileReader 和 FormData 这两个对象和...
  • hsany330
  • hsany330
  • 2016年09月18日 16:24
  • 9527

img src转blob下载图片

--> var img = document.getElementById("img"); var result1 = document.getElementById("re...
  • z5976749
  • z5976749
  • 2016年12月05日 00:12
  • 3735
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:手工上传,下载(Blob,base64)
举报原因:
原因补充:

(最多只允许输入30个字)