简易商品页——文件上传与富文本编辑框

7 实现基于Servlet3.0的文件上传功能

7.1 修改静态原型

1 表单设置参数enctype="multipart/form-data"

<form enctype="multipart/form-data"

2 表单的文件域元素。    type=file

商品图片：<input type="file" name="goodsImg"><br>

7.2 指定文件上传的逻辑路径URL

http://localhost:9527/sutWeb/upload/1439870442342.jpeg

<img alt="" src="${pageContext.request.contextPath }/upload/1439870442342.jpeg">

7.3 编写工具类

在工具类中处理文件上传时关于文件名的问题。

1 随机生成 一个新的文件名称。

public static String getNewFileName(){           UUID uuid = UUID.randomUUID();           return uuid.toString().replace("-", "");      }

2 获取文件的后缀名称。

/**       * 获取后缀       * @param realFileName 上传真实文件名称       * @return 后缀       */      public static String getFileTypeName(String realFileName){           return realFileName.substring(realFileName.lastIndexOf("."));      }

String flieName = "a.jpg";           String newFileName = FileUtil.getNewFileName();           String fileTypeName = FileUtil.getFileTypeName(flieName);           System.out.println(newFileName+fileTypeName);

7.4 编写Controller层

基于Servlet3.0的文件上传，使用Part接口。

1 为Controller加入可以处理文件上传的注解

@WebServlet("/goods/save.do") @MultipartConfig public class GoodsSaveController extends HttpServlet {

2 使用Part接口来接收文件上传

@WebServlet("/goods/save.do") @MultipartConfig public class GoodsSaveController extends HttpServlet {      protected void doGet(HttpServletRequest request, HttpServletResponse response)                throws ServletException, IOException {           //文件上传           Part part = request.getPart("goodsImg");           String realFileName = part.getSubmittedFileName();//获取上传文件的真实名称。           String newFileName = FileUtil.getNewFileName();//随机文件名           String fileTypeName = FileUtil.getFileTypeName(realFileName);//文件后缀           String saveGoodsImg = newFileName+fileTypeName;//上传保存的新名称           //获取逻辑路径URL对应的物理路径           String savePath = this.getServletContext().getRealPath("/upload/");           System.out.println(savePath);           part.write(savePath + File.separator + saveGoodsImg);           //1获取请求参数           Goods goods = new Goods();           goods.setGoodsName(request.getParameter("goodsName"));           goods.setGoodsPrice(Double.parseDouble(request.getParameter("goodsPrice")));           goods.setGoodsNum(Integer.parseInt(request.getParameter("goodsNum")));           goods.setGoodsImg(saveGoodsImg);           Types goodsType = new Types();           goodsType.setTypeId(Integer.parseInt(request.getParameter("typeId")));           goods.setGoodsType(goodsType);                     //2 调用业务           GoodsService goodsService = new GoodsServiceImpl();           try {                goodsService.save(goods);                response.sendRedirect(request.getContextPath()+"/goods/search.do");           } catch (NameException e) {                e.printStackTrace();                request.setAttribute("errorInfo", e.getMessage());                request.getRequestDispatcher("/goods/save.jsp").forward(request, response);           }      }      protected void doPost(HttpServletRequest request, HttpServletResponse response)                throws ServletException, IOException {           request.setCharacterEncoding("utf-8");           doGet(request, response);      } }

8 实现使用富文本编辑框保存商品详情

8.1 数据库原型

8.2 导入kind

8.3 导入kind的依赖的jar

8.4 在页面中导入kind

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/kindeditor/themes/default/default.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/kindeditor/plugins/code/prettify.css"> <script type="text/javascript" src="${pageContext.request.contextPath }/kindeditor/kindeditor-all-min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/kindeditor/lang/zh-CN.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/kindeditor/plugins/code/prettify.js"></script>

8.5 在表单中设置一个商品详情的文本域<textarea>

商品详情：<textarea name="goodsDetails" id="goodsDetails" rows="5" cols="30"></textarea>

8.6 将文本域设置为富文本编辑框

<script>         KindEditor.ready(function(K) {                var editor1 = K.create('#goodsDetails', {                     cssPath : '${pageContext.request.contextPath }/css/prettify.css',                     uploadJson : '${pageContext.request.contextPath }/kindeditor/upload_json.jsp',                 fileManagerJson : '${pageContext.request.contextPath }/kindeditor/file_manager_json.jsp'                     });                });      </script>

8.7 设置富文本框的二个核心jsp文件

8.8 编写保存商品的Controller

 最终效果图：