基於ueditor的兼容IE8的多圖片上傳+預覽效果(JSP)


    能夠兼容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)
這里寫圖片描述

下面為代碼講解:

  1. 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">
    之所以要這么寫是因為博主在其他瀏覽器測試時發現不加這個的話可能會報錯(如果大家測試時不報錯就可以不用加)。

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: