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文件夾下。

選擇圖片完成之后，如下圖所示。

我傳了一張大圖。