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

布满荆棘的人生 2022-06-14 02:19 175阅读 0赞

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

原理解释：

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

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

js代码详情：

**var** reader = **new** FileReader();

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

reader.οnlοad= **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);

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，175人围观）

还没有评论，来说两句吧...

相关阅读

相关 java + minio实现image图片上传下载接口的deme

项目deme地址：`https://gitee.com/itliulei/springboot-minio-demo.git` idea spring+maven+myba

逃离我推掉我的手/ 2023年07月19日 10:39/ 0 赞/ 9 阅读

相关使用springMVC实现上传下载图片

上传多张图片代码： public static final String PICTUREURL = "/mnt/pic/";//图片路径 public sta

深藏阁楼爱情的钟/ 2023年03月14日 05:48/ 0 赞/ 31 阅读

相关 01---FastDFS实现图片的上传和下载

一：环境的安装： 1： Docker工具的安装：作用：将镜像运行成容器的工具。 cd docker源码目录 sudo apt-key add

r囧r小猫/ 2022年12月14日 15:59/ 0 赞/ 233 阅读

相关 js+html实现图片的上传和下载

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />

缺乏、安全感/ 2022年08月28日 10:52/ 0 赞/ 201 阅读

相关图片上传与下载

效果展示： ![Center][] 封装图片上传类file.class.php <?php class File{ public $

- 日理万妓/ 2022年08月22日 15:18/ 0 赞/ 207 阅读

相关使用Servlet实现文件的上传与下载

一、新建JavaWeb项目 File->New->Other->Dynamic Web Project 二、新建UploadDownloadServlet

太过爱你忘了你带给我的痛/ 2022年07月12日 05:44/ 0 赞/ 215 阅读

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

采用cropbox.js+jqueryajax + servlet实现图片的上传下载原理解释：利用javascript的内置对象FileReader读取计算机中的文

布满荆棘的人生/ 2022年06月14日 02:19/ 0 赞/ 176 阅读

相关 springboot的图片上传和下载

使用springboot项目获取的相对路径，图片的存取位置是：C:\\Users\\GongYiYang\_PC\\AppData\\Local\\Temp\\undertow

怼烎@/ 2022年05月17日 07:52/ 0 赞/ 224 阅读

相关 springmvc实现图片的上传

1、加入图片上传的jar包上边的解析内部使用下边的jar进行图片上传。 ![20190711172502829.png][] 2、form表单中添加enctype

野性酷女/ 2021年12月10日 14:55/ 0 赞/ 582 阅读

相关使用summernote实现复制图片即可实现图片上传

个人资源与分享网站：[http://xiaocaoshare.com/][http_xiaocaoshare.com] 1.页面结构 <script src="../sta

你的名字/ 2021年09月24日 09:32/ 0 赞/ 587 阅读