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;    
    }

这样子就OK啦，图片就自动上传到编辑器里面了，而且还可以自适应，效果如下：

这个是浏览器看手机效果