基于ueditor的兼容IE8的多图片上传+预览效果（JSP）

最新推荐文章于 2022-05-03 14:07:01 发布

death05

最新推荐文章于 2022-05-03 14:07:01 发布

阅读量3.8k

点赞数

分类专栏： jsp 文章标签： ie 8 ueditor jsp 多图上传预览

本文链接：https://blog.csdn.net/death05/article/details/58601392

版权

jsp 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

    能够兼容IE8的多图片上传插件真的是少之又少，百度开发的ueditor中有多图片上传功能，如果能将其剥离出来则是完美，博主在网上找到了别人剥离好的例子（仅针对JSP），加上上一篇博客提到的预览效果，二者结合，则既可以上传图片，又可以预览图片。

上一篇博客地址：http://blog.csdn.net/death05/article/details/58587348
预览JS下载地址：http://download.csdn.net/download/death05/9765979
本项目下载地址：http://download.csdn.net/download/death05/9766375
如果大家急着想要，可以在下方留言，博主可以单独发。

效果如下：

在第一个页面（index.jsp）上传：

多图片上传按钮
我修改了ueditor文件下dialogs/image/image.html中的代码，删掉了多余的部分（博主所做的项目是不能上网，所以其他功能用不上）
点击按钮后的界面
想做到这个效果只需修改ueditor中的dialogs/image/image.html页面即可。
上传照片

上传成功图片直接显示在当前页面是因为我修改ueditor.all.js的10639行开始，添加了:

            //该部分为图片展示缩略图的自定义
            var newImg = '',newUrl = '',ci;
            ci = opt[0];
            for (var i = 0; ci = opt[i++];) {
                newImg += '<div style="width:102px;height:130px;float:left;margin:10px;">' + 
                            '<div><img src="'+ci._src+'" class="img_preview" style="width:100px;height:100px;border:1px solid #ccc;" onclick="imgPreview(this,\''+ ci._src +'\')"/></div>' + 
                            '<div style="width:102px;margin:0px auto 0px auto;">' + 
                            '<input type="button" value="删除" onclick="deleteImage(this,\'' + ci._src + ',\')" /></div>' + 
                            '</div>';
                newUrl += ci._src + ',';
            }
            var ueditor = $("#" + me.key);
            var parent = ueditor.closest('.uploadImageDiv');
            var img_preview_arr = parent.find('div.img_preview_arr');
            var img_url_arr = parent.find('form.imgPreviewForm').find('input.img_url_arr');
            var content1 = img_preview_arr.html();
            var content2 = img_url_arr.val();
            img_preview_arr.html(content1+newImg);
            img_url_arr.val(content2+newUrl);
            return;

点击一张图片后跳转到另一个界面（imagePreview.jsp中间有用到一个Servlet）
这里写图片描述

下面为代码讲解：

index.jsp中：

引入ueditor

<script type="text/javascript" charset="utf-8" src="./uploadImage/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="./uploadImage/ueditor.all.js"> </script>
<script type="text/javascript" charset="utf-8" src="./uploadImage/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" charset="utf-8" src="./imgPreview/jquery.min.js"></script>

定义图片样式（移到图片上时，鼠标样式变化）

    <style type="text/css">
        .img_preview {
            cursor: pointer;
        }
    </style>

页面内容：

    <%-- 
        编辑页面所需代码
        以下只有'script'和'input name="img_url_arr"'有id，其他都不需要id，前者是在ueditor初始化时使用，后者是在保存时取得其图片内容使用。
        编辑页面中，存储的图片内容{imageContent}要放在'input name="img_url_arr"'的value中，这样，才能在编辑页面初始化正确显示图片。
     --%>
    <div class="uploadImageDiv"> 
        <%--id名与下面 “编辑页面初始化ueditor多图上传按钮”中的id同名--%>
        <script id="editor_arr1" type="text/plain" style="width:50px;margin:5px 10px;height:0;float:left;"></script>
        <%--点击图片执行的action --%>
        <form class="imgPreviewForm" method="post" action="imgPreviewServlet" target="_blank">
            <%--所有的图片地址存储在这个input标签中，保存时，用“$("#imageContent1").val()”取得其内容 。--%>
            <input type="hidden" name="img_url_arr" class="img_url_arr" id="imageContent1" value=""/>
            <%--当前点击的图片的src --%>
            <input type="hidden" name="img_url" class="img_url" value=""/>
        </form>
        <%--展示图片区域 --%>
        <div id="img_preview_arr" class="img_preview_arr" style="float:left;"></div>
    </div>
    <script type="text/javascript">
    //编辑页面初始化ueditor多图上传按钮
    var ue_arr1 = UE.getEditor('editor_arr1', {
        toolbars: [["insertimage"]],
    });

    //编辑页面初始化图片
    var img_url_arr = new Array();
    var uploadImageDivs = new Array();
    uploadImageDivs = $(".uploadImageDiv");
    for(var j=0;j<uploadImageDivs.length;j++){
        var img_url_arr = uploadImageDivs.eq(j).find('form.imgPreviewForm').find('input.img_url_arr');
        img_url_arr = img_url_arr.val().split(",");
        var content = '';
        for(var i=0;i<img_url_arr.length-1;i++){
            content += '<div style="width:102px;height:130px;float:left;margin:10px;">' + 
                        '<div><img src="'+img_url_arr[i]+'" class="img_preview" style="width:100px;height:100px;border:1px solid #ccc;" onclick="imgPreview(this,\''+ img_url_arr[i] +'\')"/></div>' + 
                        '<div style="width:102px;margin:0px auto 0px auto;">' + 
                        '<input type="button" value="删除" onclick="deleteImage(this,\'' + img_url_arr[i] + ',\')" class="crm-btn-blue"/></div>' + 
                        '</div>';
        }
        uploadImageDivs.eq(j).find('div.img_preview_arr').html(content);
    }

    //点击图片进行图片预览
    function imgPreview(obj, image){
        var uploadImageDiv = $(obj).closest(".uploadImageDiv");
        var imgPreviewForm = uploadImageDiv.find("form.imgPreviewForm");
        var img_url = imgPreviewForm.find("input.img_url");
        img_url.val(image);
        imgPreviewForm.submit();
    }

    //点击删除按钮，删除当前图片
    function deleteImage(obj, src){
        var uploadImageDiv = $(obj).closest(".uploadImageDiv");
        $(obj).parent("div").parent("div").remove();
        var img_url_arr = uploadImageDiv.find("form.imgPreviewForm").find("input.img_url_arr");
        var all = img_url_arr.val();
        var allTemp = all.replace(src,"");
        img_url_arr.val(allTemp);
    }
    </script>

    之所以要用class来进行取值是为了满足一个页面可能会用到多个多图片上传按钮，这样只需要保证ueditor用到的那个script的id定义一下即可，而在保存时就只要获取input中name为img_url_arr即可。

web.xml中

    <servlet>
        <servlet-name>ImgPreviewServlet</servlet-name>
        <servlet-class>cn.com.servlet.ImgPreviewServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>ImgPreviewServlet</servlet-name>
        <url-pattern>/imgPreviewServlet/*</url-pattern>
    </servlet-mapping>

ImgPreviewServlet.java

package cn.com.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ImgPreviewServlet extends HttpServlet {

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //获取参数
        String img_url_arr = request.getParameter("img_url_arr");
        String img_url = request.getParameter("img_url");
        //计算点击的是第几张图片
        int index = img_url_arr.indexOf(img_url);
        index = index/(img_url.length() + 1);
        String[] img_url_arrs = img_url_arr.split(",");
        String content = "";
        for(int i=0;i<img_url_arrs.length;i++){
            //生成页面代码
            String li = "<li><img data-original=\"" + img_url_arrs[i] + "\" src=\"" + img_url_arrs[i] + 
                        "\" alt=\"图片" + (i+1) + "\" id=\"img" + (i+1) + "\" width=\"200px\"; height=\"200px\";\\></li>";
            content += li;
        }
        String url = "imagePreview.jsp";
        request.setAttribute("content", content);
        request.setAttribute("imgId", "\"#img"+(index+1)+"\"");
        request.getRequestDispatcher(url).forward(request, response);
    }

}

imagePreview.jsp

这个预览页面在我的上一篇博客中有提过，而它对应的资源在这里。

<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <title>图片预览</title>
    <link rel="stylesheet" type="text/css" href="./imgPreview/viewer.min.css"></link>
    <style>
        * { margin: 0; padding: 0;}
        #dowebok { width: 700px; margin: 0 auto; font-size: 0;}
        #dowebok li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}
        #dowebok li img { width: 100%;}
    </style>
  </head>
  <body>
    <ul id="dowebok">
        ${content}
    </ul>
  <script type="text/javascript" charset="utf-8" src="./imgPreview/jquery.min.js"></script>
  <script type="text/javascript" charset="utf-8" src="./imgPreview/viewer-jquery.min.js"></script>
  <script>
    $(function() {
        $('#dowebok').viewer({
            url: 'data-original',
        });
        //点击图片（做成上一个页面点击的是哪一张，这个页面也点击同样一张的效果）
        $(${imgId}).click();
    });
  </script>
  </body>
</html>

唯一需要关注的是上面那个jsp中我开头是：

<html lang="zh-Hans">

    之所以要这么写是因为博主在其他浏览器测试时发现不加这个的话可能会报错（如果大家测试时不报错就可以不用加）。

death05

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录