目的:选择图片,进行图片回显之后将图片保存到服务器上(PS:没有使用任何插件,样式很丑)

实现方式:

js+servlet+jsp的方式来实现

事先准备:

文件上传处理在浏览器中是以流的形式提交到服务器端的,直接用Servlet获取文件上传的输入流然后再解析里面的请求参数比较麻烦,一般采用apach组织提供的开源工具common-fileupload这个文件上传组件,common-fileupload是依赖于common-io这个包的,所以还需要下载这个包。struts封装的上传功能就是基于它们

前台jsp代码:

<form action="${pageContext.request.contextPath}/uploadHandleServlet" enctype="multipart/form-data" method="post"><img id="picture" src="" width="106" alt=""> <br />上传文件目录:<input type="file" name="file" id='file' onchange="showPic(this)" /><br /> <input type="submit" value="提交" /></form>

给file控件绑定一个onchange事件,在前台写js获取file的地址,然后回显(不同的浏览器以及版本在获取file控件框里的方式可能有区别,要考虑兼容性问题,因此在2中写ajax,从后台传url的json数据过来,这种方式不用考虑兼容性问题)

<script type="text/javascript">//图片回显+图片格式+文件类型function showPic(obj) {var newPreview = document.getElementById('picture');if (obj) {//ie浏览器兼容 if (window.navigator.userAgent.indexOf("MSIE") >= 1) {obj.select();newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);";var path = document.selection.createRange().text;var flag = judgeImgSuffix(path);if (flag) {newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.selection.createRange().text;} else {alert("要求图片格式为png,jpg,jpeg,bmp");}return;}//firefox浏览器兼容 else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {if (obj.files) {newPreview.src = window.URL.createObjectURL(obj.files.item(0));return;}newPreview.src = obj.value;return;}newPreview.src = obj.value;return;}}function judgeImgSuffix(path) {var index = path.lastIndexOf('.');var suffix = "";if (index > 0) {suffix = path.substring(index + 1);}if ("png" == suffix || "jpg" == suffix || "jpeg" == suffix|| "bmp" == suffix || "PNG" == suffix || "JPG" == suffix|| "JPEG" == suffix || "BMP" == suffix) {return true;} else {//alert("请上传正确到的图片格式");return false;}}
</script>

serlet处理代码

package http_homework;import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.List;
import java.util.UUID;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadBase;
import org.apache.commons.fileupload.ProgressListener;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;public class UploadHandleServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {HttpSession session = request.getSession();// 得到上传文件的保存目录,将上传的文件存放于WEB-INF目录下,不允许外界直接访问,保证上传文件的安全String savePath = this.getServletContext().getRealPath("/WEB-INF/upload");// 上传时生成的临时文件保存目录String tempPath = this.getServletContext().getRealPath("/WEB-INF/temp");File tmpFile = new File(tempPath);if (!tmpFile.exists()) {// 创建临时目录
            tmpFile.mkdir();}// 消息提示String message = "";try {// 使用Apache文件上传组件处理文件上传步骤:// 1、创建一个DiskFileItemFactory工厂DiskFileItemFactory factory = new DiskFileItemFactory();// 设置工厂的缓冲区的大小,当上传的文件大小超过缓冲区的大小时,就会生成一个临时文件存放到指定的临时目录当中。factory.setSizeThreshold(1024 * 100);// 设置缓冲区的大小为100KB,如果不指定,那么缓冲区的大小默认是10KB// 设置上传时生成的临时文件的保存目录
            factory.setRepository(tmpFile);// 2、创建一个文件上传解析器ServletFileUpload upload = new ServletFileUpload(factory);// 监听文件上传进度upload.setProgressListener(new ProgressListener() {public void update(long pBytesRead, long pContentLength,int arg2) {System.out.println("文件大小为:" + pContentLength + ",当前已处理:"+ pBytesRead);/*** 文件大小为:14608,当前已处理:4096 文件大小为:14608,当前已处理:7367* 文件大小为:14608,当前已处理:11419 文件大小为:14608,当前已处理:14608*/}});// 解决上传文件名的中文乱码upload.setHeaderEncoding("UTF-8");// 3、判断提交上来的数据是否是上传表单的数据if (!ServletFileUpload.isMultipartContent(request)) {// 按照传统方式获取数据return;}// 设置上传单个文件的大小的最大值,目前是设置为1024*1024字节,也就是1MBupload.setFileSizeMax(1024 * 1024);// 设置上传文件总量的最大值,最大值=同时上传的多个文件的大小的最大值的和,目前设置为10MBupload.setSizeMax(1024 * 1024 * 10);// 4、使用ServletFileUpload解析器解析上传数据,解析结果返回的是一个List<FileItem>集合,每一个FileItem对应一个Form表单的输入项List<FileItem> list = upload.parseRequest(request);for (FileItem item : list) {// 如果fileitem中封装的是普通输入项的数据if (item.isFormField()) {String name = item.getFieldName();// 解决普通输入项的数据的中文乱码问题String value = item.getString("UTF-8");// value = new String(value.getBytes("iso8859-1"),"UTF-8");System.out.println(name + "=" + value);} else {// 如果fileitem中封装的是上传文件// 得到上传的文件名称,String filename = item.getName();System.out.println(filename);                    if (filename == null || filename.trim().equals("")) {//session.setAttribute("image_path", filename);continue;}// 注意:不同的浏览器提交的文件名是不一样的,有些浏览器提交上来的文件名是带有路径的,如:// c:\a\b\1.txt,而有些只是单纯的文件名,如:1.txt// 处理获取到的上传文件的文件名的路径部分,只保留文件名部分filename = filename.substring(filename.lastIndexOf("\\") + 1);// 得到上传文件的扩展名String fileExtName = filename.substring(filename.lastIndexOf(".") + 1);// 如果需要限制上传的文件类型,那么可以通过文件的扩展名来判断上传的文件类型是否合法System.out.println("上传的文件的扩展名是:" + fileExtName);// 获取item中的上传文件的输入流InputStream in = item.getInputStream();// 得到文件保存的名称String saveFilename = makeFileName(filename);// 得到文件的保存目录String realSavePath = makePath(saveFilename, savePath);// 创建一个文件输出流FileOutputStream out = new FileOutputStream(realSavePath+ "\\" + saveFilename);// 创建一个缓冲区byte buffer[] = new byte[1024];// 判断输入流中的数据是否已经读完的标识int len = 0;// 循环将输入流读入到缓冲区当中,(len=in.read(buffer))>0就表示in里面还有数据while ((len = in.read(buffer)) > 0) {// 使用FileOutputStream输出流将缓冲区的数据写入到指定的目录(savePath + "\\"// + filename)当中out.write(buffer, 0, len);}// 关闭输入流
                    in.close();// 关闭输出流
                    out.close();// 删除处理文件上传时生成的临时文件// item.delete();message = "文件上传成功!";}}} catch (FileUploadBase.FileSizeLimitExceededException e) {e.printStackTrace();request.setAttribute("message", "单个文件超出最大值!!!");request.getRequestDispatcher("/message.jsp").forward(request,response);return;} catch (FileUploadBase.SizeLimitExceededException e) {e.printStackTrace();request.setAttribute("message", "上传文件的总的大小超出限制的最大值!!!");request.getRequestDispatcher("/message.jsp").forward(request,response);return;} catch (Exception e) {message = "文件上传失败!";e.printStackTrace();}session.setAttribute("message", message);response.sendRedirect(request.getContextPath()+"/message.jsp");//request.getRequestDispatcher("/message.jsp").forward(request, response);
    }private String makeFileName(String filename) { // 2.jpg// 为防止文件覆盖的现象发生,要为上传文件产生一个唯一的文件名return UUID.randomUUID().toString() + "_" + filename;}private String makePath(String filename, String savePath) {// 得到文件名的hashCode的值,得到的就是filename这个字符串对象在内存中的地址int hashcode = filename.hashCode();int dir1 = hashcode & 0xf; // 0--15int dir2 = (hashcode & 0xf0) >> 4; // 0-15// 构造新的保存目录String dir = savePath + "\\" + dir1 + "\\" + dir2; // upload\2\3// upload\3\5// File既可以代表文件也可以代表目录File file = new File(dir);// 如果目录不存在if (!file.exists()) {// 创建目录
            file.mkdirs();}return dir;}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doGet(request, response);}
}

补充知识点:

form表单enctype="multipart/form-data",form表单enctype(编码类型)有三种,当要传输非文本框的数据时,应该用multipart/form-data,以二进制数据流的方式传输

window.navigator.userAgent.indexOf("Firefox") >= 1是js方式获取浏览器的名称,详情可见博客:https://www.cnblogs.com/feng18/p/6562168.html

window.URL.createObjectURL(obj.files.item(0))是js获取火狐上传文件路径的完整地址,IE又有它自己的一套

后台处理的java:

当表单设置为multipart/form-data传输数据时,不能用request.getParameter("xxx")来获取数据了,因为它传输的是二进制文件了。

整体这么几个步骤:1.创建DiskFileItemFactory文件上传工厂,设置文件保存路径,临时路径,缓冲区大小

2.创建ServletFileUpload文件解析对像,解析过程中可以监听进度,解析字符编码防止中文乱码,设置上传单个文件大小,总文件的大小

3.使用解析器对上传内容进行解析,将其划分成普通数据和上传文件(MP3,图片,视频等),在分别对其操作

参考自:http://www.cnblogs.com/xdp-gacl/p/4200090.html

转载于:https://www.cnblogs.com/zengcongcong/p/10693562.html

java图片上传及图片回显1相关推荐

  1. SpringBoot vue图片上传不能立即回显问题解决

    最开始项目是放在eclipse之中的.springboot项目默认把静态的文件加载到classpath的目录下的.而此时我们上传的图片并没有传入启动了的项目当中去.所以明明路径是对的.却访问不了.在项 ...

  2. java分布式实现图片上传到图片服务器

    java分布式实现图片上传到图片服务器 操作步骤 第一步 第二步 第三步 第四步 第五步 第六步 代码实现 第七步 JS代码 大功告成!! 操作步骤 第一步 在页面中的form表单里面增加一个inpu ...

  3. java 图片服务器 上传_Java实现把图片上传到图片服务器(nginx+vsftp)

    前言: 在我另一篇笔记中已经记载了如何用nginx + vsftp搭建图片服务器(请参考nginx + vsftp搭建图片服务器),并且用vsftp的客户端工具filezilla测试过已经可用.但是在 ...

  4. Java实现把图片上传到图片服务器(nginx+vsftp)

    在我另一篇笔记中已经记载了如何用nginx + vsftp搭建图片服务器,并且用vsftp的客户端工具filezilla测试过已经可用.但是在开发中应该是把用户在前端页面提交的图片保存到图片服务器中, ...

  5. 使用vue+elementUi+springBoot实现图片上传,图片删除,图片展示

    使用vue+elementUi+springBoot实现图片上传,图片删除,图片展示 环境配置 准备环境 使用软件 图片上传 图片删除 图片显示 所有代码均为参考,每个人的方法不一样,效果不一样,该代 ...

  6. vue+vant图片上传压缩图片大小

    vue+vant图片上传压缩图片大小 可能在项目中大家都会遇到文件上传的需求,比如头像,图片等,但是太大的文件上传会给服务器造成很大大压力,那么我们就需要压缩上传的文件 其实这儿所说的压缩,就是图片重 ...

  7. Vue Element UI 之富文本图片上传服务器 + 图片地址插入富文本

    该案例的情况 vue版本:vue cli3 插件:vue-quill-editor vue-quill-editor的增强模块:quill-image-extend-module quill-imag ...

  8. 菜鸟的springboot项目图片上传及图片路径分析

    菜鸟的springboot项目图片上传及图片路径分析 说明 一.图片路径分析 二.实现图片上传 (1)单文件上传(非异步) (2)单文件上传(异步) 三.总结 四.更新配置文件 说明 更新时间:202 ...

  9. springboot实现图片上传和图片删除

    图片上传主要将需要上传的图片上传到对应的存储地址当中,再通过url访问图片就可以了:本文存储地址在本地,如果是在服务器上,配置服务器端的地址就可以了. controller @ApiOperation ...

  10. 解决H5 IOS手机图片上传时图片会旋转90°问题

    解决H5 IOS手机图片上传时图片会旋转90°问题 Vant 官方给出的解答需要自己解决,没有处理. 解决办法主要使用了 compressorjs 插件库 一.Vant UI库Uploader 组件图 ...

最新文章

  1. 利用LSM实现更安全的linux
  2. [CLPR] 用于加速训练神经网络的二阶方法
  3. 操作系统原理:操作系统的启动 中断/异常/系统调用
  4. c++获得总和S所需的最小硬币数量的函数(附完整源码)
  5. qt android刘海屏状态栏,华为Mate30 Pro设计曝光:仍配刘海屏+3D结构光
  6. Q/A: AD的Kerberos报错
  7. 【论文阅读】Deep Residual Learning for Image Recognition
  8. 三、定义主从实体基类
  9. Atitit 规范标准化的艺术 -----java jsr的实现 目录 1. Atitit jsr规范有多少个 407个。Jsr规范大全 1 2. Atitit jsr规范化分类 attilax总
  10. 恒强制版系统980_华为mate40将首批升级鸿蒙2.0系统?
  11. 查看计算机安装程序版本,Product Key Explorer(程序密钥显示工具)
  12. 优科Ruckus R610 AP刷Unleashed固件
  13. 网页做服务器的监控界面,服务器监控页面
  14. Linux系统查看服务器版本方法
  15. 802.11标准及无线网运行模式
  16. 【自然语言处理】韩语基础与入门(1)
  17. Hypergraph Neural Networks HGNN
  18. 软考 - 软件设计师 - 下午-案例分析 做题技巧与考点整理
  19. 输出N阶方阵 ,输出该方阵及方阵主对角线的总和
  20. 【 失踪人口回归】新·学期

热门文章

  1. ZOJ 3867 Earthstone: Easy Version
  2. 微信公众号开发系列教程一(调试环境部署续:vs远程调试)
  3. CodeForces 230A
  4. 解决Error基础连接已经关闭: 未能为SSL/TLS 安全通道建立信任关系
  5. 使用Lucene检索文档中的关键字
  6. 【Java从0到架构师】项目实战 - 驾考(旧)- Freemarker、MyBatis-Plus
  7. 读书笔记_量化交易如何建立自己的算法交易04
  8. 快、准、狠!秒杀Excel的报表工具,十分钟教你做好数据填报
  9. excel服务器没有响应怎么办,勤哲Excel服务器技术支持|Excel服务器常见问题解答...
  10. oracle 自定义表类型赋值,Oracle自定义类型 Record + PL/SQL表