1. 程式人生 > >(原) Bootstrap 視覺化HTML編輯器,summernote 圖片上傳到伺服器磁碟

(原) 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 "";
}


記錄一下 不喜勿噴。