一: 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页面对保存路径等一系列进行配置。

posted @ 2017-03-22 16:32  yandong025  阅读(1613)  评论(0编辑  收藏  举报