swf图片下载预览
发布时间：2020-12-15 17:35:33 所属栏目：百科 来源：网络整理
导读：一。前面页面 !DOCTYPE htmlhtmlheadmeta charset="UTF-8"titleInsert title here/titlemeta http-equiv="Content-Type" content="text/html; charset=utf-8" /meta http-equiv="pragma" content="no-cache" /meta http-equiv="cache-control" content="no-c
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3" /> <meta http-equiv="description" content="This is my page" /> <script type="text/javascript" src="../../components/jquery/jquery-1.7-min.js"></script> <script type="text/javascript" src="../../util/jquery.query.js"></script> <link rel="stylesheet" type="text/css" href="../../util/css/base.css" /> <script type="text/javascript" src="../../util/public.js"></script> <script type="text/javascript" src="../../util/rputil.js"></script> <script type="text/javascript" src="../../util/util.js"></script> <script type="text/javascript" src="../../components/SWFUPLOAD v2.2.0/swfupload.js"></script> <!-- <script type="text/javascript" src="../../components/SWFUPLOAD v2.2.0/swfupload.queue.js"></script> <script type="text/javascript" src="../../components/SWFUPLOAD v2.2.0/handlers.js"></script> <script type="text/javascript" src="../../components/SWFUPLOAD v2.2.0/fileprogress.js"></script> --> <!-- <link rel="stylesheet" type="text/css" href="../../components/SWFUPLOAD v2.2.0/default.css" /> --> <link rel="stylesheet" type="text/css" href="css/projectSite_PhotoManage.css" /> <script type="text/javascript" src="js/projectSite_PhotoManage.js"></script> <script type="text/javascript" src="js/swfupload.js"></script> </head> <body> <div class="imgWrapper"> <div class="imgContent"> <div class="operPanel"> <div class="addImgPng"> <img src="img/reload.png" title='刷新照片列表'> </div> <div class="uploadImg"> <span id='spanButtonPlaceholder'></span> </div> <div class="batchDel"> <span class="content">批量删除</span> </div> <div class="selection"> <table> <tr> <td><input id="openMultiSelection" type=checkbox>开启多选</td> <td> <div class='msgshow'> <a href="javascript:void(0);" onclick="MultiSelection(this)" _mm='false'>[全选/反选]</a>你已经选择了<span id="selectedNum">0</span>张照片! </div> </td> </tr> </table> </div> <div class="clearAll"></div> </div> <div class="photoWrapper"> </div> <div class="photoPage"> </div> </div> <div class="imgDesc"> <div class="caption"> <div class="title">上传说明</div> <div class="captionIcon"></div> <div class="clearAll"></div> </div> <dl> <dt>拍照部位</dt> <dd></dd> </dl> <dl> <dt>拍照命名</dt> <dd></dd> </dl> <dl> <dt>拍照要求</dt> <dd></dd> </dl> <dl> <dt>拍照人</dt> <dd></dd> </dl> <dl> <dt>拍照时间</dt> <dd></dd> </dl> <dl> <dt>备注</dt> <dd></dd> </dl> </div> <div class="imgDescBack"> <div class="caption"> <div class="captionIcon"></div> <div class="clearAll"></div> </div> </div> </div> </body> </html> js文件 $(document).ready(function() {
parm = getParm()
$(".addImgPng").click(function(){window.location.reload()})
// $(".uploadImg").click(uploader)
$(".batchDel").click(batchDel)
/*$(".imgDesc .captionIcon").click(function(){
var w = $(this).parent().parent().width();
$(".imgContent").width($(".imgContent").width()+w);
$(this).parent().parent().hide()
$(".imgDescBack").show()
})
$(".imgDescBack .captionIcon").click(function(){
$(this).parent().parent().hide();
var w = $(".imgDesc").width();
$(".imgContent").width($(".imgContent").width()-w);
$(".imgDesc").show()
})*/
$("#openMultiSelection").click(function() {
if (this.checked) {
$(".msgshow").show();
$("#selectedNum").text($(".photo .imgselection:checked").size())
$(".photo .imgselection").show()
} else {
$(".msgshow").hide();
$(".photo .imgselection").hide()
$(".photo .imgselection").each(function() {
this.checked = false;
});
}
})
loadPhotoDesc()
page.setUrl("/cpm/functions/sitereportphoto/queryByPageSiteReportPhotoAction.action");
page.init();
/* $(".photoViewer").click(function(){
$(this).animate({left:$(this).attr("_left"),top:$(this).attr("_top"),width:$(this).attr("_width"),height:$(this).attr("_height")},200,function(){
$(this).width(0).height(0).css({top:0,left:0})
});
});*/
});
var parm;
// 获取页面 url参数
function getParm() {
// debugger;
var map = {};
var urlsearch = location.search
var ps = urlsearch.substring(1,urlsearch.length).split("&")
for (var i = 0; i < ps.length; i++) {
if (ps[i]) {
var pms = ps[i].split("=");
if (pms.length == 2) {
map["parm." + pms[0]] = decodeURIComponent(pms[1] || "")
}
}
}
return map;
}
// 获取图片列表信息
function loadPhotos() {
AjaxCall(
"/cpm/functions/sitereportphoto/querySiteReportPhotoAction.action",parm,function(result) {
if (result && result.photos) {
buildPhoto(result.photos)
}
},"json",true);
}
function editPhoto(){
editPhotoName($(this).parent().parent().next());
$(this).parent().hide();
if(event.stopPropagation)event.stopPropagation();else event.cancelBubble=true;
}
function delPhoto(){
var id = $(this).parent().parent().attr("id");
if(!confirm("确定要删除？")){
return false;
}
AjaxCall(
"/cpm/functions/sitereportphoto/deleteSiteReportPhotoAction.action",{'parm.ID':id},function(r){
if(r && !r.errMsg){
page.toPage(0);
}
},true);
return false;
}
var ie5 = (function() {
var m = window.top.document.documentMode;
if(m <=5){
return window.top.document.compatMode == 'BackCompat'
}
return false;
})();
function photoLoaded(event){
var photoViewer = $(event && event.target);
if(!photoViewer[0]){
photoViewer = $(window.top.document.body).find(".photoViewer")
}
if(!photoViewer[0].complete){
setTimeout("photoLoaded()",100);
return;
}
var wtop = $(window.top)
var width = photoViewer.width()
var height = photoViewer.height()
photoViewer.css({border:0,margin:0,padding:0,'cursor':'pointer','z-index':'1000',position:ie5?'absolute':'fixed',left : ((wtop.width()-width)/2),top : ((wtop.height()-height)/2)})
showPhotoIndx(photoViewer.attr("idx"),photoViewer.attr("total"))
}
function showPhotoIndx(idx,total){
$(window.top.document.body).find(".photoScreenWrapper").append("<div class='instantshow' style='top:-1;left:-1;z-index:1002;text-align:center;vertical-align:middle;color:white;width:100%;height:100%;border-width:0;margin:0;padding:0;background-color:transparent;font-family:Helvetica Neue,微软雅黑,Tohoma;font-size:72px;font-weight:900;opacity:0.30;-moz-opacity:0.30;filter:alpha(opacity=30);'><span style='background-color:black;'> "+(parseInt(idx)+1)+" / "+total+" </span></div>")
$(window.top.document.body).find(".photoScreenWrapper .instantshow").css('position',ie5?'absolute':'fixed')
setTimeout("removeInstantShow()",600);
}
function removeInstantShow(){
$(window.top.document.body).find(".photoScreenWrapper .instantshow").remove();
}
function sphotoDrag(event){
var photoViewer = $(this);
photoViewer.attr("xy",event.originalEvent.clientX+","+event.originalEvent.clientY)
}
function ephotoDrag(event){
var photoViewer = $(this);
var texts = (photoViewer.attr("xy")||"").split(",")
var x = texts[0]
var y = texts[1]
var top = photoViewer.position().top + event.originalEvent.clientY - parseFloat(y);
var left = photoViewer.position().left + event.originalEvent.clientX - parseFloat(x);
photoViewer.css({top:top,left:left})
}
function photoDrag(event){
var photoViewer = $(this);
var texts = (photoViewer.attr("xy")||"").split(",left:left})
photoViewer.attr("xy","+event.originalEvent.clientY)
}
function closeViewer(event){
if(event.type == 'click' )
$(this).remove();
if(event.originalEvent.stopPropagation)
event.originalEvent.stopPropagation();
else
event.originalEvent.cancelBubble=true;
}
function viewPhoto(){
var t = $(this);
var wtop = $(window.top.document.body)
var photoViewer = wtop.find(".photoViewer");
if(!photoViewer[0]){
wtop.append("<div class='photoScreenWrapper'><div class='photoViewerWrapper'></div><img class='photoViewer'><div class='oper_tab'><span class='prev'><img src='../images/base/left.png'></span><span class='middlePanel'></span><span class='next'><img src='../images/base/right.png'></span></div></div>")
photoViewer = wtop.find(".photoViewer");
photoViewer.bind("load",photoLoaded).bind("dragstart",sphotoDrag).bind("drag",photoDrag).bind(
"dragend",ephotoDrag);
photoViewer.parent().bind("click",closeViewer)
photoViewer.next().find(".prev,.next").bind("click",gotoPhoto)
photoViewer.parent().css({'background-color':'transparent',width:$(window.top).width()+2,height:$(window.top).height()+2,left:-1,top:-1,'z-index':'999',position:ie5?"absolute":'fixed'})
photoViewer.prev().css({border:0,top:0,left:0,width:'100%',height:'100%',position:ie5?"absolute":'fixed','background-color':'grey',opacity: 0.5,'-moz-opacity':0.5,filter:'alpha(opacity=50)'});
photoViewer.next().css({'z-index':1001,'background-color':'black',filter:'alpha(opacity=50)','border-radius':'5px',width:'50%',left:'50%','margin-left':'-25%',height:'63px',bottom:'-5px'});
photoViewer.next().find("img").css({height:'40px',width:'25px'});
photoViewer.next().find(".prev").css({cursor:'pointer',position:'absolute',left:'0',top:'10px',width:'76px','text-align':'center','vertical-align':'middle'})
photoViewer.next().find(".next").css({cursor:'pointer',right:0,'vertical-align':'middle'})
photoViewer.next().find(".middlePanel").css({display:'block','line-height':'63px',color:'white',margin:'0 0','font-family':'Helvetica Neue,Tohoma','font-size':'17px','font-weight':'normal'})
}
photoViewer.parent().show();
photoViewer.attr("src",t.children().first().attr("src")+"&random="+new Date().getTime()).attr("idx",t.parent().index()).attr("total",t.parent().parent().find(".photo").size())
photoViewer.next().find(".middlePanel").text(t.next().text())
}
function gotoPhoto(event){
var clazz = $(this).attr("class")
var wtop = $(window.top.document.body)
var photoViewer = wtop.find(".photoViewer");
var idx = parseInt(photoViewer.attr("idx")||0)
if(clazz == 'prev'){
if(idx-1>=0)
{
photoViewer.attr("src",$(".photoWrapper .photo:eq("+(idx-1)+") .photo_img").attr("src")+"&random="+new Date().getTime()).attr("idx",idx-1)
photoViewer.next().find(".middlePanel").text($(".photoWrapper .photo:eq("+(idx-1)+") .photo_title").text())
}
else
alterFirstIcon()
}else if(clazz == 'next'){
if((idx+1)<=(parseInt(photoViewer.attr("total"))-1))
{
photoViewer.attr("src",$(".photoWrapper .photo:eq("+(idx+1)+") .photo_img").attr("src")+"&random="+new Date().getTime()).attr("idx",idx+1)
photoViewer.next().find(".middlePanel").text($(".photoWrapper .photo:eq("+(idx+1)+") .photo_title").text())
}
else
alterLastIcon()
}
if(event.originalEvent.stopPropagation)
event.originalEvent.stopPropagation();
else
event.originalEvent.cancelBubble=true;
}
function alterLastIcon(){
$(window.top.document.body).find(".photoScreenWrapper").append("<div class='instantshow' style='top:-1;left:-1;z-index:1002;text-align:center;vertical-align:middle;color:white;width:100%;height:100%;border-width:0;margin:0;padding:0;background-color:transparent;font-family:Helvetica Neue,Tohoma;font-size:72px;font-weight:900;opacity:0.30;-moz-opacity:0.30;filter:alpha(opacity=30);'><span style='background-color:black;'> 已经是最后一张 </span></div>")
$(window.top.document.body).find(".photoScreenWrapper .instantshow").css('position',600);
}
function alterFirstIcon(){
$(window.top.document.body).find(".photoScreenWrapper").append("<div class='instantshow' style='top:-1;left:-1;z-index:1002;text-align:center;vertical-align:middle;color:white;width:100%;height:100%;border-width:0;margin:0;padding:0;background-color:transparent;font-family:Helvetica Neue,Tohoma;font-size:72px;font-weight:900;opacity:0.30;-moz-opacity:0.30;filter:alpha(opacity=30);'><span style='background-color:black;'> 已经是第一张 </span></div>")
$(window.top.document.body).find(".photoScreenWrapper .instantshow").css('position',600);
}
function html(photo) {
var div = "<div class="photo">"
+ "<a class="a_photo" id="
+ photo.ID
+ ">"
+ "<img class="photo_img" src="/cpm/functions/sitereportphotodown/downSiteReportPhotoDownAction.action?parm.ID="
+ photo.ID
+ "&parm.PHOTO_DIR="
+ photo.PHOTO_DIR
+ "&parm.IMG_TYPE="
+ photo.IMG_TYPE
+ ""/><input class="imgselection" type=checkbox />"
+ "<img class="imgOper" src="img/down.png"/>"
+ "<ul class="operMenu"><li class="edit"><div><span>编辑</span></div></li><li class="delete"><div><span>删除</span></div></li></ul>"
+ "</a>"
+ "<span class="photo_title" ondblclick="editPhotoName()">"
+ photo.PHOTO_NAME + "</span>" + "</div>";
return div;
}
function editPhotoName(t){
var namePanel = t||event.srcElement;
var id = $(namePanel).prev().attr("id");
if($(namePanel).next() && $(namePanel).next().attr("name") == 'PHOTO_NAME'){
$(namePanel).next().val($(namePanel).text()).show();
}else
{
$(namePanel).after("<input type=text name='PHOTO_NAME' PHOTO_ID="+id+" style='width:122px;height:24px;' value='"+$(namePanel).text()+"'>")
$(namePanel).next().bind({"blur":fblur,"keydown":fchange,"change":fchange});
}
$(namePanel).hide();
$(namePanel).next().focus();
}
function fblur(t){
$(t.srcElement||t).hide().prev().show();
}
function fchange(t){
var e = t.srcElement;
if(t.type == 'change' || t.type == 'keydown' && (t.keyCode == 13 || t.keyCode == 27)){
if(t.keyCode == 27 || e.value == $(e).prev().text()){
fblur(t);
return;
}
if(t.type == 'keydown' && t.keyCode == 13){
$(e).unbind("change")
}
if(!e.value || e.value.replace("[^ x00- xff]",'**').length>200 || e.value.match(/[."<>|?*':]/)){
alert("照片名称必须在1-100字之间,并且不能包含."<>|?*':等特殊字符");
return;
}
if(t.type == 'keydown' && t.keyCode == 13){
fblur(t)
}
var map = getParm();
map["parm.ID"] = $(e).attr("PHOTO_ID");
map["parm.PHOTO_NAME"] =e.value;
AjaxCall("/cpm/functions/sitereportphoto/editSiteReportPhotoAction.action",map,function(r){
if(t.type == 'keydown' && t.keyCode == 13)$(e).bind("change",fchange);
if(r){
if(r.errMsg)
{
e.value = $(e).prev().text();
alert(r.errMsg);
}
else
$(e).prev().text(e.value);
}
},true);
}
}
function showMe(t){
var img = t.srcElement;
if(img.readyState && img.readyState== 'complete'){
$(img).show().parent().css("background","")
}
}
// 获取照片描述信息
function loadPhotoDesc() {
AjaxCall("/cpm/functions/sitereportphoto/queryPhotoDescSiteReportPhotoAction.action",function(r){
if(r && r.photos){
var photo = r.photos[0];
if(photo){
$(".imgDesc dd:eq(0)").append(photo.NAME);
$(".imgDesc dd:eq(1)").append(photo.EXT1);
$(".imgDesc dd:eq(2)").append(photo.EXT2);
$(".imgDesc dd:eq(3)").append(photo.EXT3);
$(".imgDesc dd:eq(4)").append(photo.EXT4);
$(".imgDesc dd:eq(5)").append(photo.EXT5);
}
}
},true);
}
// 照片上传借口方法
function uploader() {
var DICT_TYPE = parm['parm.DICT_TYPE']
var SITE_ID = parm['parm.SITE_ID'];
var PROJECT_ID = parm['parm.PROJECT_ID'];
var TYPE = parm['parm.TYPE'];
var POSITION = parm['parm.POSITION'];
Util.openWindow("照片上传","/cpm/functions/projectsitephoto/projectSite_PhotoUpload.html",700,500,{
DICT_TYPE : DICT_TYPE,SITE_ID : SITE_ID,PROJECT_ID : PROJECT_ID,PHOTO_TYPE : TYPE,PHOTO_POSITION : POSITION
},function() {
page.toPage(0);
})
}
// 批量删除方法
function batchDel() {
if($(".photo .imgselection:checked").size()== 0){
alert("请勾选上需要删除的照片！");
return;
}else{
if(!confirm("确定要删除勾选上的照片？")){
return;
}
}
var ids = [];
$(".photo .imgselection:checked").each(function(){ids[ids.length] = $(this).parent().attr("id");})
AjaxCall(
"/cpm/functions/sitereportphoto/deleteSiteReportPhotoAction.action",{'parm.IDS':ids.join(",")},function(r){
if(r){
page.toPage(0);
}
},true);
}
function MultiSelection(t){
$(".photo .imgselection").each(function(){this.checked = !this.checked;});
$("#selectedNum").text($(".photo .imgselection:checked").size())
}
function buildPhoto(photos){
$(".photo").remove()
for (var i = 0;photos && i < photos.length; i++) {
$(".photoWrapper").append(html(photos[i]));
$(".photoWrapper .photo:last").mouSEOver(function(){
$(this).find(".imgOper").show();
}).mouseleave(function(){
$(this).find(".imgOper").hide();
$(this).find(".operMenu").hide();
}).find(".imgOper").click(function(){$(this).parent().find(".operMenu").show();if(event.stopPropagation)event.stopPropagation();else event.cancelBubble=true;});
$(".photoWrapper .photo:last .a_photo").click(viewPhoto);
$(".photoWrapper .photo:last .edit").click(editPhoto);
$(".photoWrapper .photo:last .delete").click(delPhoto);
$(".photoWrapper .photo:last .imgselection").click(function(){$("#selectedNum").text($(".photo .imgselection:checked").size());if(event.stopPropagation)event.stopPropagation();else event.cancelBubble=true;});
}
}
var page = {pageIndex:0,pageSize:18,totalPage:0,totalCount:0,view:null,build:buildPhoto,parm:{},url:"",setUrl:function(){
this.url = arguments[0]||"";
},setParm:function(){
this.parm = arguments[0] ||{};
},toPage:function(){
var pid = arguments[0] || 1;
this.pageIndex = pid;
this.call();
},bulidView:function(){
this.view.empty();
if(this.totalPage == 0)
{
return;
}
var j=1,a=3,b=7;
for(;j <= this.totalPage;j++){
$(this.view).append("<a class="toPage" page=""+j+"" title="第"+j+"页" href="javascript:void(0);">"+j+"</a>");
if(this.pageIndex>a+b+1 && j == a){
if(this.view.find("#split1").size())
$(this.view).find(".toPage[page='"+j+"']").insertAfter("#split1");
else
$(this.view).find(".toPage[page='"+j+"']").after("<div id="split1" class="page-split">...</div>");
j = this.pageIndex - b -1;
}else if((this.totalPage - this.pageIndex >= a+b+1) && (j == new Number(this.pageIndex) + b)){
if(this.view.find("#split2").size())
$(this.view).find(".toPage[page='"+j+"']").insertAfter("#split2");
else
$(this.view).find(".toPage[page='"+j+"']").after("<div id="split2" class="page-split">...</div>");
j = this.totalPage - a;
}
}
this.view.find(".toPage[page='"+this.pageIndex+"']").attr("disabled","disabled");
this.view.find(".toPage").click(function(e){
if($(e.srcElement).attr("disabled")=='disabled'){
return false;
}
page.toPage($(e.srcElement).attr("page"));
});
this.view.append("<div class="clearall"/>")
},callback:function(result){
var result = arguments[0] || null;
if(result && result.page){
page.totalCount = result.page.totalCount;
page.totalPage = result.page.totalPage;
page.build(result.page.list);
page.bulidView();
}
},init:function(){
this.view = $(".photoPage");
this.pageIndex = 1;
for(var a in parm){
var b = a.replace("parm.","");
this.parm[b] = parm[a]
}
this.call();
},call:function(){
AjaxCall(this.url,this.json(),this.callback,true);
},json:function(){
var map = {};
for(var a in this){
if(typeof this[a] == 'object' && a != 'view'){
for(var i in this[a])
map["page."+a+"."+i] = this[a][i];
}else if(typeof this[a] == 'string' || typeof this[a] == 'number'){
map["page."+a] = this[a];
}
}
return map;
}
};
三。page分页实例类: package com.sctf.cpm.util;
import java.util.*;
public class Page {
private int pageIndex;
private int pageSize = 10;
private int totalPage;
private int totalCount;
private List list;
private Map<String,Object> parm;
private String url;
public int getPageIndex() {
return pageIndex;
}
public void setPageIndex(int pageIndex) {
this.pageIndex = pageIndex;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getTotalPage() {
return totalPage;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public int getTotalCount() {
return totalCount;
}
public void setTotalCount(int totalCount) {
this.totalCount = totalCount;
}
public List getList() {
return list;
}
public void setList(List list) {
this.list = list;
}
public Map getParm() {
if(parm != null)
{
for(Iterator it = parm.keySet().iterator();it.hasNext();){
String obj = (String)it.next();
if(obj!=null){
if(parm.get(obj) instanceof Object[])
{
parm.put(obj,((Object[])parm.get(obj))[((Object[])parm.get(obj)).length-1]);
}
}
}
}
return parm;
}
public void setParm(Map parm) {
this.parm = parm;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public static void main(String args[]){}
}
五：Action类： /**
* 分页查询
* @Title: queryByPage
* @return
*/
public String queryByPage(){
photos = siteReportPhotoService.queryByPage(page);
return "queryByPage";
}
六：Service层： public List<Map> queryByPage(Page page) {
Map map = page.getParm();
int totalCount = dao.selectTotalCount(map);
page.setTotalCount(totalCount);
int totalPage = totalCount / page.getPageSize() + (totalCount % page.getPageSize() > 0 ? 1 :0);
page.setTotalPage(totalPage);
if(totalPage == 0)
return null;
int start = (page.getPageIndex()-1) * page.getPageSize()+1;
int end = start + page.getPageSize()-1;
map.put("start",start);
map.put("end",end);
List list = dao.queryByPage(map);
page.setList(list);
return null;
}
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
