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

一个插件

/**
 * ^.^
 */
;(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>