（原） Bootstrap 可视化HTML编辑器，summernote 图片上传到服务器磁盘

  
  


  
  
前台

html

<div id="editor" class="col-sm-8"></div>

js
//加载编辑器
$(document).ready(function () {
    //类型下拉框值
    var sType = "";
    $("#type").change(function () {
        sType = $("#type").val();
    });
    $('#editor').summernote({
        height: 400,
        minHeight: 300,
        maxHeight: 500,
        focus: true,
        lang: 'zh-CN',
        // 重写图片上传
        callbacks: {
            onImageUpload: function (files, editor, $editable) {
                sendFile(files[0], editor, $editable);
            }
        }
    });


    //保存
    $("#save_button").click(function () {
        
            if ($('#editor').summernote('code').length < 20000) {
                $.ajax({
                    url: "/*",
                    type: "POST",
                    dataType: "json",
                    data: {
                        title: $("#title").val(),
                        publishPerson: $("#publishPerson").val(),
                        content: $('#editor').summernote('code'),
                        publishTypeId: publishTypeId,
                        type: sType,
                        remark: $("#remark").val()
                    },
                    success: function (result) {
                        if (result > 0) layer.alert("发布成功！");
                        else layer.alert("发布失败！");
                    }
                });
            }
            else {
                layer.alert("内容超过长度限制！");
            }

    })
});
//图片上传
function sendFile(file, editor, $editable) {
    var filename = false;
    try {
        filename = file['name'];
    } catch (e) {
        filename = false;
    }
    if (!filename) {
        $(".note-alarm").remove();
    }

    //以上防止在图片在编辑器内拖拽引发第二次上传导致的提示错误
    data = new FormData();
    data.append("file", file);
    data.append("key", filename); //唯一性参数

    $.ajax({
        data: data,
        type: "POST",
        url: "/*",  //后台图片上传地址
        cache: false,
        dataType : "json",
        contentType: false,
        processData: false,
        success: function (url) {
            var path = url.path;
            $('#editor').summernote('insertImage', url.path, filename);

        },
        error: function () {
            alert("上传失败！");
        }
    });
}

后台

@RequestMapping(value = "/upload", produces = "text/html;charset=UTF-8")
@ResponseBody
public String addFile(HttpServletRequest request)
        throws Exception {

    Map<String, Object> map = new HashMap<String, Object>();

    CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
            request.getSession().getServletContext());
    if (multipartResolver.isMultipart(request)) {
        MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
        Iterator<String> iter = multiRequest.getFileNames();
        while (iter.hasNext()) {
            MultipartFile file = multiRequest.getFile(iter.next());
            if (file != null) {
                String myFileName = file.getOriginalFilename();
                if (myFileName.trim() != "") {
                    String fileName = file.getOriginalFilename();

                    String fileBaseName = fileName.substring(0,
                            fileName.lastIndexOf("."));
                    String fileExt = fileName.substring(
                            fileName.lastIndexOf(".") + 1).toLowerCase();
                    SimpleDateFormat df = new SimpleDateFormat(
                            "yyyyMMddHHmmss");
                    String newFileName = df.format(new Date());
                    String fileNames = newFileName
                            + new Random().nextInt(1000) + "." + fileExt;

                    String filePath = request.getSession().getServletContext()
                            .getRealPath("/") + "\\upload\\" + fileNames;
                    File localFile = new File(filePath);
                    if (!localFile.exists()) {// 如果文件夹不存在，自动创建
                        localFile.mkdirs();
                    }
                    file.transferTo(localFile);

                    fileNames = "*" + fileNames;  //* == 前台读取文件方式路径

                    map.put("name", fileBaseName);
                    map.put("path", fileNames);

                    ObjectMapper mapper = new ObjectMapper();
                    String json = mapper.writeValueAsString(map);

                    return json;
                }
            }
        }
    }
    return "";
}

  
  

   
   记录一下 不喜勿喷。