summernote异步图片上传

本文主要是介绍summernote异步图片上传，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

用summernote编辑器的好处是因为可以自适应，手机也可以自适应，很方便，编辑器本身也有自带的图片上传，不过不方便，还是自己写一个异步上传的方法

具体如下：

前端页面代码：

        <tr class="">
                  <td>沟通内容：</td>
                  <td><textarea class="form-control" id="summernote" name="content" cols="60" rows="10"></textarea> </td>
        </tr>

js代码：

<script type="text/javascript">
   $(function(){
       $('#summernote').summernote({
              height: 300, //定义初始高度
              lang: 'zh-CN', // default: 'en-US'
              focus:true,
              toolbar: [
                 ['style', ['bold', 'italic', 'underline', 'clear']],
                 ['fontsize', ['fontsize']],
                 ['color', ['color']],
                 ['para', ['ul', 'ol', 'paragraph']],
                 ['height', ['height']],
                 ['insert', ['picture', 'video']]
               ],
              callbacks: {
                    onImageUpload: function(files, editor, $editable) {
                        sendFile(files[0],editor,$editable);
                    }
              }

       });

       function sendFile(file, editor, $editable){
           var filename = false;
           try{
               filename = file['name'];
           } catch(e){
               filename = false;
           }
           if(!filename){$(".note-alarm").remove();}
           //以上防止在图片在编辑器内拖拽引发第二次上传导致的提示错误
           var ext = filename.substr(filename.lastIndexOf("."));
           ext = ext.toUpperCase();// 验证图片类型
           var timestamp = new Date().getTime();
           var name = timestamp+"_"+$("#summernote").attr('aid')+ext;
           //name是文件名，自己随意定义，aid是我自己增加的属性用于区分文件用户
           data = new FormData();
           data.append("file", file);
           data.append("key",filename);
           data.append("token",$("#summernote").attr('token'));

           $.ajax({
               data: data,
               type: "POST",
               url: "${pageContext.request.contextPath}/admin/customerRecord_upload.do", //图片上传出来的url，返回的是图片上传后的路径，http格式
               contentType: false,
               cache: false,
               processData: false,
               success: function (data) {
                    var path = data.data;
                    $('#summernote').summernote('insertImage', path, filename);
                    $("img").addClass("img-responsive center-block");
                },
                error: function () {
                    alert("上传失败！");
                }
           });
       }
   });
</script>

controller层的代码

@RequestMapping(value = "/customerRecord_upload", method = RequestMethod.POST)
   @ResponseBody
   public Map<String,Object> uploadHandle(HttpServletRequest request,HttpServletResponse response){
       Map<String,Object> map = new HashMap<String,Object>(0);
       map.clear();

       MultipartFile multipartFile = null;
       // 转型为MultipartHttpRequest：
       if(request instanceof MultipartHttpServletRequest){

           MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
            // 获取对应file对象
            Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
            Iterator<String> fileIterator = multipartRequest.getFileNames();
            while (fileIterator.hasNext()) {
                String fileKey = fileIterator.next();
                // 获取对应文件
                multipartFile = fileMap.get(fileKey);
                if (multipartFile.getSize() != 0L) {
                   // 日期目录
                   String imageDir = "admin/upload/customerRecord/" + DateUtil.dateToString(new Date(), "yyyyMMdd");
                   String realPath = request.getSession().getServletContext().getRealPath(imageDir);
                   File dir = new File(realPath);
                   if (!dir.exists()) {
                       dir.mkdirs();
                   }
                   // 获取上传文件原始名称
                   String fileName = multipartFile.getOriginalFilename();
                   // 获取文件的扩展名
                   String ext = fileName.substring(fileName.lastIndexOf("."));
                   String tmpExt = ext.toLowerCase(); // 验证图片类型
                   if (!tmpExt.contains(".jpg") && !tmpExt.contains(".gif") && !tmpExt.contains(".png") && !tmpExt.contains(".jpeg")) {
                       map.put("msg", "只能上传jpg、gif、png类型的图片。");
                       map.put("data", "");
                       return map;
                   }
                   // 重新给文件命名
                   String banName = String.valueOf(System.currentTimeMillis() + RandomUtil.getRandomNumber());
                   String newName = banName + ext;
                   // 封装为文件对象
                   File targetFile = new File(realPath, newName);
                   try {
                       // 上传文件
                       multipartFile.transferTo(targetFile);
                       //返回给前端页面的图片

String path = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"//"+imageDir+"//"+newName;
                       map.put("data", path);
                       map.put("msg", "上传成功");
                   }catch(Exception e){
                       map.put("data", "");
                       map.put("msg", "上传失败");
                   }
               }
            }
       }
       return map;
   }