使用cropbox.js+jquery.js+servlet实现图片的上传下载

采用cropbox.js+jqueryajax + servlet实现图片的上传下载

原理解释：

利用javascript的内置对象FileReader读取计算机中的文件。

读取的文件会被转化为base64编码的字符串，此后通过jquery ajax将文件字符串发送到servlet，servlet接收到字符串之后，通过base64进行解码操作。重新构造图片文件，并将文件存入存储器中。

 

js代码详情：

var reader = new FileReader();

为创建的FilReader对象绑定load事件，监听reader读取数据是否成功。

reader.onload= function(e) {
              //e.target.result获取到的是base64编码
                options.imgSrc =e.target.result;
                cropper = new cropbox(options);
 }

//当FileReader对象通过readAsDataURL读取数据成功后，就会触发load事件，target中的result属性的值就是该文件的base64数据
reader.readAsDataURL(this.files[0]);

//剪裁
  document.querySelector('#btnCrop').addEventListener('click',
function(){
            var img = cropper.getDataURL();//这里cropper是创建的cropbox.js中的cropbox对象，调用了getDateURL()方法获得图片的base64编码字符串
 document.querySelector('.cropped').innerHTML +=
'<img src="'+img+'">';
            $.ajax({
              method : 'post',
             url : "/study/servlet/uploadImgServlet",
             type:"text",
             data: {"img":img},
             success:function(data){
                $("#showImage").html('<img src="'+data+'">');
             },
            error:function(error){
                alert(error);
            }
            });
 })

 

后台代码详情：

protected
void doPost(HttpServletRequest request, HttpServletResponse
response) throws ServletException, IOException {
      PrintWriter writer =
response.getWriter();
      String imgString =
request.getParameter("img");
      String im = processImgStr(imgString);
      System.out.println(imgString);
      System.out.println(im);
      String path =
"E:\\javaEE生成文件\\dd.jpg";
      generatorImage(im,path);
     
      String imgHeader =
"data:image/png;base64,";
     
      writer.write(imgHeader + getImageStr(path));
      writer.flush();
      writer.close();
   }
 
   /**
    * @Description:
将base64编码字符串转换为图片
    * @Author:

    * @CreateTime:

    * @param imgStr base64编码字符串
    * @param path
图片路径-具体到文件
    * @return
    */
  
   public String processImgStr(String
imgStr){
      int
headIndex = imgStr.indexOf(',') + 1;
      return
imgStr.substring(headIndex);
   }
 
   public
boolean generatorImage(String imgStr,String
filePath){
      if(imgStr==null){
         return
false;
      }
      else {
         BASE64Decoder decoder =
new BASE64Decoder();
         try {
             //解密过程
             byte[]
imgByte = decoder.decodeBuffer(imgStr);
             //处理数据
             for(int
i = 0; i <
imgByte.length;
i ++){
                if(imgByte[i] < 0){
                   imgByte[i] += 256;
                }
             }
             OutputStream out =
new FileOutputStream(filePath);
             //将图片存放入文件
             out.write(imgByte);
             out.flush();
             out.close();
             return
true;
         } catch (Exception
e) {
             e.printStackTrace();
             return
false;
         }
      }
   }
  
  
   /**
    * @Description:
根据图片地址转换为base64编码字符串
    * @Author:

    * @CreateTime:

    * @return
    */
   public String getImageStr(String
imgFile) {
      InputStream inputStream =
null;
       byte[]
data = null;
       try {
          inputStream =
new FileInputStream(imgFile);
          data = new
byte[inputStream.available()];
          inputStream.read(data);
          inputStream.close();
       } catch (IOException
e) {
          e.printStackTrace();
       }
       // 加密形成base64编码字符串
      BASE64Encoder encoder =
new BASE64Encoder();
       return
encoder.encode(data);
   }