一: JSP采用kindEditor編輯器實現單獨的圖片上傳功能。


1,首先jsp頁面上要加上這個:

  導入kindeditor的包基礎包和一些樣式(basePath為當前項目的路徑)
<link rel="stylesheet" href="<%=basePath%>JavaScript/kindeditor/themes/default/default.css" charset="utf-8"></link>
<link rel="stylesheet" href="<%=basePath%>JavaScript/kindeditor/themes/simple/simple.css" charset="utf-8"></link>
<script type="text/javascript" src="<%=basePath%>JavaScript/kindeditor/kindeditor-min.js"></script>
<script type="text/javascript" src="<%=basePath%>JavaScript/kindeditor/lang/zh_CN.js"></script>
頁面中的這段不可少,第一個input可以設置為隱藏,一般是用來展示保存的文件路徑的。
<div class="upload">
    <input class="ke-input-text" type="text" id="url" value="" readonly="readonly" />
    <input type="button" id="uploadButton" value="選擇頭像" />
</div>

2.還要加上這段JS,將button按鈕綁定為kindeditor上傳按鈕

復制代碼
<script type="text/javascript">
        KindEditor.ready(function(K) {
        var uploadbutton = K.uploadbutton({
            button : K('#uploadButton')[0],
            fieldName : 'imgFile',
            url : '<%=basePath%>JavaScript/kindeditor/jsp/upload_json.jsp?dir=image&EMPID=<%=EMPID%>',
                afterUpload : function(data) {
                    if (data.error === 0) {
                        var url = K.formatUrl(data.url, 'absolute');
                        K('#url').val(url);
                        alert(data.message);
                    } else {
                        alert(data.message);
                    }
                },
                afterError : function(str) {
                    alert('自定義錯誤信息: ' + str);
                }
            });
            uploadbutton.fileBox.change(function(e) {
                uploadbutton.submit();
            });
        });
  </script>
復制代碼

3.在upload_json.jsp頁面對保存路徑等一系列進行配置。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM