jsp富文本图片和数据上传

好记性不如烂笔头，记录一下。

2016的最后一天，以一篇博客结尾迎接新的一年。

此处用的富文本编辑器是wangEditor，一款开源的轻量级的富文本编辑器，这里着重说一下里面的图片上传功能。

服务器端接收图片用到了两个jar包，分别是commons-fileupload和commons-io。

下载下来之后./test/test-uploadfn.html，打开该文件，找到下面这行代码。

 editor.config.uploadImgUrl = '/wangEditor/Upload';  //等号后面写上你上传的后台路径，这里是我的路径

接下来是对服务器端的操作，这里用一个Servlet做演示，新建一个Servlet，在Post里面写上对处理前端上传图片请求得代码，如下。

 public void doPost(HttpServletRequest request, HttpServletResponse response)
             throws ServletException, IOException {
         response.setContentType("text/html;charset=utf-8");
         request.setCharacterEncoding("utf-8");

         DiskFileItemFactory factory = new DiskFileItemFactory();  //解析器的配置信息

         ServletFileUpload upload = new ServletFileUpload(factory);    //解析器的实例化对象

         String fileName = String.valueOf(new Date().getTime() + ".jpg"); //取得一个唯一的图片名称

         //我将fileName写在这个位置，而没有写在下面的for循环当中，是因为当我传图片时，一张图片，从前台会提交两次请求，
         //如果写在for里面会导致我分成两张图片保存，造成的后果就是图片格式不正确，所以我写在这里。
         //这个demo在这个地方也就被限定了，只能进行一次上传一张图片的操作

         try {
             ArrayList<FileItem> files = (ArrayList<FileItem>) upload.parseRequest(request);

             for(FileItem item : files) {

                 InputStream is = item.getInputStream();  //这里得到图片对象的输流，我将在下文中写入文件中

                 ServletContext context = getServletContext();

                 String Path = context.getRealPath("/upload"); //存放图片的目录

                 File pic_file = new File(Path);

                 if(!pic_file.exists() || !pic_file.isDirectory()) { //不存在或者不是目录就创建文件夹
                     pic_file.mkdir();
                 }

                 pic_file = new File(Path+"/"+fileName);

                 FileOutputStream out = new FileOutputStream(pic_file);  //准备写入文件的输出流

                 //建立缓冲区数组
                 byte[] buffer = new byte[1024];

                 //缓冲区数组的长度定义，当IO从流中获取不到数据的时候，返回值为-1
                 int len = -1;

                 //循环写入文件
                 while((len = is.read(buffer)) > -1) {
                     out.write(buffer,0,len);
                 }

                 is.close();

                 out.close();

                 item.delete();

                 response.getWriter().print("/wangEditor/upload/"+fileName);

             }

         } catch (FileUploadException e) {
             e.printStackTrace();
         }

     }

这样一个简单的传图demo就做好了。

示例图：

打开test-uploadfn.html。

开始点击上传图片到upload文件夹下。

选择图片完成之后，如下图所示。

我传了一张大图。