JSP:Ueditor--上传单独服务器,解决图片上传成功,但提示上传错误

一:下载:安装包

             

二:图片服务端准备:

   1.解压tomcat

   2.将刚刚下载ueditor包中的config.json,controller.jsp放入ROOT目录下

tomcat目录如下:

    3.修改服务端的config.json,controller.jsp

  • config.json
  • controller.jsp

      response.setHeader("Access-Control-Allow-Origin", "*");
      response.setHeader("Access-Control-Allow-Headers", "X-Requested-With,X_Requested_With");

      解决跨域问题

三:客户端

1.将下载ueditor包放入项目当中

2:添加页面:http://fex.baidu.com/ueditor/#start-submit

<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <title>ueditor demo</title>
</head>

<body>
    <form action="server.php" method="post">
        <!-- 加载编辑器的容器 -->
        <script id="container" name="content" type="text/plain">
            这里写你的初始化内容
        </script>
    </form>
    <!-- 配置文件 自己的js路径-->
    <script type="text/javascript" src="../ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <!-- 配置文件 自己的js路径-->
    <script type="text/javascript" src="../ueditor/ueditor.all.js"></script>
    <script type="text/javascript" charset="utf-8" src="../../ueditor/lang/zh-cn/zh-cn.js"  </script>
<!-- 实例化编辑器 -->
    <script type="text/javascript">
        var editor = UE.getEditor('container');
    </script>
</body>
</html>

3:配置ueditor.config.js

完事!

4:查看服务端图片:我的目录

四:解决服务端上传成功但是图片不显示,并提示上传错误问题:

修改js:

ueditor.all.js

 代码:

                // domUtils.on(iframe, 'load', callback);
                // form.action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?':'&') + params);
                // form.submit();
                var formdata = new FormData(form);
                var arr,reg=new RegExp("(^| )_token=([^;]*)(;|$)");

                var myForm = document.getElementById("myForm");
                var xhr= new XMLHttpRequest();
                xhr.open("POST", me.getOpt('serverUrl')+'?action=uploadimage', true);
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4)
                        if ((xhr.status >=200 && xhr.status < 300) || xhr.status == 304)
                            alert(xhr.responseText);
                }
                xhr.send(formdata);

                xhr.onreadystatechange = function () {
                    if(xhr.readyState == 4) {
                        var response = JSON.parse(xhr.responseText);
                        if(response.state=='SUCCESS' ){
                            loader = me.document.getElementById(loadingId);
                            loader.setAttribute('src', me.getOpt('serverUrl')+response.url);
                            loader.setAttribute('_src', me.getOpt('serverUrl')+response.url);
                            loader.setAttribute('title', response.title || '');
                            loader.setAttribute('alt', response.original || '');
                            loader.removeAttribute('id');
                            domUtils.removeClasses(loader, 'loadingclass');
                        }
                    }
                }

 

 

  • 4
    点赞
  • 2
    评论
  • 4
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

csdn_shenguang

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值