手工上传,下载(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>
版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

关于 HTML5 的文件上传处理,兼容,以及 BLOB 对象的使用

目前 HTML5 已经逐渐普及并成为主流,与之相关的 Single Page App 技术也逐渐被广泛应用起来,加上 Canvas 等等新的工具的支持,在前端可以做的事情可谓是非常多。 但是...

微信端图片压缩转base64,然后转file形式上传

提交 //由于微信端上传是上传至微信服务器返回一个url 所以要定义一个list记录上传成功的文件 var kcidList = []; //记录已成功上传的id $(".upload-f...

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

七牛云存储之Base64图片上传

概述 实际开发中,经常会遇到需要将图片转换为base64编码后的字符串进行处理,所以七牛云存储也提供了该接口的,支持base64图片上传。 思路:获取七牛提供的Auth对象,为获取token 指定需...

javascript base64 作为文件上传。

例如我们用某些 裁剪插件 得到的图片是 这样的,那这样的文件怎样在from 表单上传(当然我是举例,大部分的裁剪插件都是有内置的) 首先需要 吧 base64 流转换成 blob 对象...

html5的FileReader实现图片上传预览并生成base64

利用html5的FileReader实现图片上传预览并生成base64。HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文...

使用base64进行移动端图片上传

之前搞微信上的图片上传,想直接通过接口上传到自己的图片服务器,发现移动端浏览器上挺多坑的,使用最简单的form-data形式好像不成。研究了一下,发现base64格式通用性较强。base64编码bas...

用户头像base64编码上传与保存头像问题

今天这篇博文主要讲思想,可能别人还有更好的学习思路,如果觉得还有更好的想法的可以留言博主哦^-^咱们先一步一步的来,首先,我们要获取本地的图片,无论你们是采用拍照、相册或是drawable资源返回的B...

Asp.net Base64图片上传

Asp.net Base64图片上传

php图片上传两种方式base64与file

首先介绍大家熟知的form表单提交(file)方式: 上传

如何上传base64图片到七牛云存储,然后返回图片url呢??

如何上传base64图片到七牛云存储,然后返回图片url呢?? 前言在做项目时,有时候我们需要把canvas中的图画导出成为图片,但我们知道导出来的图片是base64的字符流图片,而这种编码图片在手...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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