picture_set_param.jsp

于 2011-11-10 15:38:48 发布
阅读量422 收藏
点赞数
文章标签： function path stylesheet button border callback
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/feng547/article/details/6880097
版权
本文详细介绍了如何通过用户界面设置图片的背景色、背景来源、背景图片、logo图片、对齐方式等属性，并提供了相应的JavaScript实现代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    
<%@ include file="common/tablib.jsp" %>

<link rel="STYLESHEET" type="text/css" href="css/dhtmlxcolorpicker.css">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script>window.dhx_globalImgPath = "imgs/dhtmlx/dhtmlxCombo/"</script>
<script src="dhtmlx/dhtmlxcommon.js"></script>
<script src="dhtmlx/dhtmlxcolorpicker.js"></script>
<script src="js/util/jquery-1.4.4.js"></script>
<script src="js/util/ibus_util.js"></script>
<script src="js/util/boc_invoker.js"></script>


<title>图片单元属性设置</title>



<style>
body,html{overflow:auto;width:100%; height:100%;}
.edit-div{ text-align:center; border:1px solid #a4bed4; margin:2px; height:320px; background:#fff;}
.edit-tab{line-height:25px; margin-top:10px;}
.edit-tab th{ text-align:right; padding-right:10px; font-weight:lighter; width:25%; vertical-align:top; padding-top:3px;}
.edit-tab td{ text-align:left;}
.edit-tab td span{ color:#FF0000; padding-left:5px;}
.edit-tab .sel-img{height:110px; width:300px; background:#fff; border:1px solid #7f9db9; overflow:auto}
.edit-tab .sel-img ul{list-style:none;margin:0px; padding:0px;}
.edit-tab .sel-img li{float:left; list-style:none;text-align:left; margin:5px;}
</style>



</head>
  
  <body style="background:#f1f8ff;">
  <input type="hidden" id="targetId" value="<%=request.getParameter("targetId") %>"/>
		
			<div >
				<table width="450" border="0" cellspacing="0" cellpadding="0" class="edit-tab">
					<tr>
						<th>背景色</th>
						<td>
						    <input id="color" style="width: 30px;"><input type="button" id="a2" value="选择颜色">
						</td>
					</tr>
					<tr>
						<th>背景图来源</th>
						<td>
							<select id="source" name="source" rel="no_init_style" style="width: 100px;" οnchange="selecttype()">
								<option value="default" selected="selected">系统</option>
								<option value="custom">自定义</option>
							</select>
						</td>
					</tr>
					<tr id="tr_background">
						<th>背景图片</th>
						<td>
							<!--<div class="sel-img">
								-->
								<select id="sltBr" οnchange="changeBackground()"><option value="0" select="selected">请选择</option></select>
								<img src="" id="imgbackground" style="display:none" width="350">
							<!--</div>
						-->
						</td>
					</tr>
					<form id="form_background" name="form_background" action="<%=request.getContextPath()%>/FileMgrAction.do?method=uploadPicture&type=0" enctype="multipart/form-data" method="post" target="hidden_frame">
					<tr id="tr_backgroundpath" style="display:none">
						<th>背景图片地址</th>
						<td>
						        <input type="file" id="background" name="background" style="width:280px" />
						</td>
					</tr>
					<tr id="tr_logopath" style="display:none">
						<th>logo图片地址</th>
						<td>
						        <input type="file" id="logo" name="logo" style="width:280px"/>
						</td>
					</tr>
					<span id="msg"></span>
					<br>  
                    <!--<font color="red">支持JPG,JPEG,GIF,BMP,SWF,RMVB,RM,AVI文件的上传</font>   
                    --><iframe name='hidden_frame' id="hidden_frame" style='display:none'></iframe>
					</form>
					<tr id="tr_logo">
						<th>logo图片</th>
						<td>
							<select id="sltLogo" οnchange="changeLogo()"><option value="0" select="selected">请选择</option></select>
							<img src="" id="imgLogo" style="display:none" width="350">
						</td>
					</tr>
					
					<tr>
						<th>对齐方式</th>
						<td>
							<select id="aligntype" name="aligntype" rel="no_init_style" style="width: 100px;">
								<option value="left" selected="selected">居左</option>
								<option value="center">居中</option>
								<option value="right">居右</option>
							</select>
						</td>
					</tr>
					
				</table>
			</div>
		
		<div id="srcDiv" style="position: relative;padding-top:5px; text-align:center;">
			<input type="button" id="ensure" name="ensure" value="确 定" rel="no_init_style" class="winensurebnt" οnclick="ensureButton()"/>
			<input type="button" name="cancel" value="取 消" rel="no_init_style" class="winclosedbnt" οnclick="cancelButton()"/>
		</div>
  </body>
<script type="text/javascript"> 
	var tabarId = document.getElementById("targetId").value;
	var designerObj = parent.getSelfDesigner(tabarId);

	//var myCP1 = new dhtmlXColorPickerInput('color');
	var myCP1 = new dhtmlXColorPicker(null, null, true, true);
	myCP1.setImagePath(path+"/jsp/developcenter/unitdesigner/picture/imgs/dhtmlx/dhtmlxColorPicker/");
	myCP1.init();
    myCP1.linkTo("color", "a2");
    
        
    InitSlt();

        function InitSlt(){
            var clientController = new ClientBOController("picture_boc","loadBackground");
		    //clientController.addParameter("path",path);
		    bocInvoker.bocName = "BOControllerAction";
		    bocInvoker.bocMethod = "executeBoc";
	        var imgStr = bocInvoker.invokeSynchronized(clientController);
	        //alert(imgStr);
	        if (imgStr!="") {
				var Imgs = imgStr.split(",");
	        
                var obj = document.getElementById("sltBr");
                for(var i = 0; i < Imgs.length; i++){
                    var opt = document.createElement("option");
                    opt.value = opt.innerHTML = Imgs[i];
                    obj.appendChild(opt);
                }
			}
	        
            
            clientController = new ClientBOController("picture_boc","loadLogo");
		    //clientController.addParameter("path",path);
		    bocInvoker.bocName = "BOControllerAction";
		    bocInvoker.bocMethod = "executeBoc";
	        imgStr = bocInvoker.invokeSynchronized(clientController);
	        //alert(imgStr);
	        
	        if (imgStr!="") {
				Imgs = imgStr.split(",");
	        
            	var obj = document.getElementById("sltLogo");
            	for(var i = 0; i < Imgs.length; i++){
                	var opt = document.createElement("option");
                	opt.value = opt.innerHTML = Imgs[i];
                	obj.appendChild(opt);
            	}
			}
	        
        }
    
	    function changeBackground(){
            var select = document.getElementById("sltBr").value; 
            var image = document.getElementById("imgbackground");
            if (select=="0") {
				image.style.display="none";
				image.src = "";
			}else{
			    image.style.display="";
                image.src = path+"/jsp/developcenter/unitdesigner/picture/imgs/background/"+select;
            }
        }
        
        function changeLogo(){
            var select = document.getElementById("sltLogo").value; 
            var image = document.getElementById("imgLogo");
            if (select=="0") {
				image.style.display="none";
				image.src = "";
			}else{
			    image.style.display="";
                image.src = path+"/jsp/developcenter/unitdesigner/picture/imgs/logo/"+select;
            }
        }
	
	
	(function(){

		//加载背景颜色
		//document.getElementById("color").value = designerObj.pictureUIObj.color;
		myCP1.setColor(designerObj.pictureUIObj.color);
		document.getElementById("color").style.backgroundColor = designerObj.pictureUIObj.color;
		
		
		//加载对齐方式
		var aligntypeSelect = document.getElementById("aligntype");
		for(var i=0;i<aligntypeSelect.length;i++){
			var selectedValue = aligntypeSelect.options[i].value;
			if(designerObj.pictureUIObj.align == selectedValue){
				aligntypeSelect.options[i].selected = "selected";	break;
			}
		}
		
		//加载logo地址
		if (designerObj.pictureUIObj.logo.filepath!="") {
		    var select = document.getElementById("sltLogo"); 
		    //alert("filename="+designerObj.pictureUIObj.logo.filename);
		    select.value  = designerObj.pictureUIObj.logo.filename;
		    document.getElementById("imgLogo").style.display="";
            document.getElementById("imgLogo").src = path+"/jsp/developcenter/unitdesigner/picture/imgs/logo/"+select.value;
		}
		
		//加载背景图地址
		if (designerObj.pictureUIObj.background.filepath!="") {
		    var select = document.getElementById("sltBr");  
		    //alert(designerObj.pictureUIObj.logo.filename);
		    select.value  = designerObj.pictureUIObj.background.filename;
		    document.getElementById("imgbackground").style.display="";
            document.getElementById("imgbackground").src = path+"/jsp/developcenter/unitdesigner/picture/imgs/background/"+select.value;
		}
		
	})();
	
	//改变图片来源选项
	function selecttype(){
		var selecttype=document.getElementById("source").value
		if(selecttype=="default"){
			document.getElementById("tr_background").style.display="";
			document.getElementById("tr_logo").style.display="";
			document.getElementById("tr_backgroundpath").style.display="none";
			document.getElementById("tr_logopath").style.display="none";
			
		}else if(selecttype=="custom"){
			document.getElementById("tr_background").style.display="none";
			document.getElementById("tr_logo").style.display="none";
			document.getElementById("tr_backgroundpath").style.display="";
			document.getElementById("tr_logopath").style.display="";
			
		}
	}

	//点击确定按钮
	function ensureButton(){
		applyButton();
		//cancelButton();
	}
	//点击取消按钮
	function cancelButton(){
		designerObj.dhxWins.window("Picture").close();
	}
	//点击应用按钮
	function applyButton(){
	    
		//设置背景颜色
		designerObj.pictureUIObj.color = document.getElementById("color").style.backgroundColor;
		//设置对齐方式
		var aligntype = document.getElementById("aligntype");
		designerObj.pictureUIObj.align = aligntype.options[aligntype.selectedIndex].value;
		parent.document.getElementById(tabarId).style.textAlign = designerObj.pictureUIObj.align;
		
		parent.document.getElementById(tabarId).style.background = designerObj.pictureUIObj.color;
		
		var selecttype=document.getElementById("source").value;
	    var filepath = "";
	    if(selecttype=="default"){
	        //背景图
	        var selectimg =  document.getElementById("sltBr").value;
	        if (selectimg=="0") {
				designerObj.pictureUIObj.background.filepath = "";
			    designerObj.pictureUIObj.background.filename = "";
			    designerObj.pictureUIObj.background.filetype = "";
			    parent.document.getElementById(tabarId).style.backgroundImage = "";
			} else {
			    designerObj.pictureUIObj.background.filepath = path+"/jsp/developcenter/unitdesigner/picture/imgs/background/" + selectimg;
	            designerObj.pictureUIObj.background.filename = selectimg;
	            designerObj.pictureUIObj.background.filetype = selectimg.substring(selectimg.lastIndexOf("."));
	            parent.document.getElementById(tabarId).style.backgroundImage = "url(" + designerObj.pictureUIObj.background.filepath + ")";
			}
			
			//logo图
			selectimg =  document.getElementById("sltLogo").value;
			if (selectimg=="0") {
				designerObj.pictureUIObj.logo.filepath = "";
			    designerObj.pictureUIObj.logo.filename = "";
			    designerObj.pictureUIObj.logo.filetype = "";
			    parent.document.getElementById("logo").src = "";
			    parent.document.getElementById("logo").style.display="none";
			} else {
			    designerObj.pictureUIObj.logo.filepath = path+"/jsp/developcenter/unitdesigner/picture/imgs/logo/" + selectimg;
	            designerObj.pictureUIObj.logo.filename = selectimg;
	            designerObj.pictureUIObj.logo.filetype = selectimg.substring(selectimg.lastIndexOf("."));
			    parent.document.getElementById("logo").style.display="";
				parent.document.getElementById("logo").src = designerObj.pictureUIObj.logo.filepath;
			}
			cancelButton(); 
		}else{
		    var filepath = document.getElementById("background").value;
		    if (filepath != "") {
		        var filetype = filepath.substring(filepath.lastIndexOf(".")+1);
		        if ("gif,jpg,png,icon,bmp".indexOf(filetype.toLowerCase())==-1) {
				    alert("背景图片只能上传gif/jpg/png/icon/bmp类型的图片文件!");
				    return;
			    }
		    }
		    
			filepath = document.getElementById("logo").value;
			if (filepath != "") {
		        var filetype = filepath.substring(filepath.lastIndexOf(".")+1);
		        if ("gif,jpg,png,icon,bmp".indexOf(filetype.toLowerCase())==-1) {
				    alert("logo图片只能上传gif/jpg/png/icon/bmp类型的图片文件!");
				    return;
			    }
		    }
		    jQuery("#form_background").submit();
		    callback("正在上传，请稍后。。。");
		    //window.setTimeout( "upload()", 5000 );
		    //jQuery("#form_logo").submit();
		    //alert(document.getElementById("background").value);
		    
		    //alert("上传图片");
		    //alert(document.getElementById("form_background").action);
		    //document.getElementById("form_background").submit();
		    //jQuery("#form_background").submit();
		    //jQuery("#form_logo").submit();
		}
	}
	
	function change(){
	    var filepath = document.getElementById("background").value;
		    if (filepath != "") {
		        //上传背景图片
				
				var filename = filepath.substring(filepath.lastIndexOf("\\")+1);
				designerObj.pictureUIObj.background.filepath = path+"/jsp/developcenter/unitdesigner/picture/imgs/background/" + filename;
	            designerObj.pictureUIObj.background.filename = filename;
	            designerObj.pictureUIObj.background.filetype = filename.substring(filename.lastIndexOf("."));
	            parent.document.getElementById(tabarId).style.backgroundImage = "url(" + designerObj.pictureUIObj.background.filepath + ")";
			    //alert(designerObj.pictureUIObj.background.filepath);
			}else{
			    //设置背景图片为空
			    designerObj.pictureUIObj.background.filepath = "";
			    designerObj.pictureUIObj.background.filename = "";
			    designerObj.pictureUIObj.background.filetype = "";
			    parent.document.getElementById(tabarId).style.backgroundImage = "";
			}
			
			filepath = "";
			filepath = document.getElementById("logo").value;
			if (filepath != "") {
		        //上传logo图片
				var filename = filepath.substring(filepath.lastIndexOf("\\")+1);
	            designerObj.pictureUIObj.logo.filepath = path+"/jsp/developcenter/unitdesigner/picture/imgs/logo/" + filename;
	            designerObj.pictureUIObj.logo.filename = filename;
	            designerObj.pictureUIObj.logo.filetype = filename.substring(filename.lastIndexOf("."));
			    parent.document.getElementById("logo").style.display="";
				parent.document.getElementById("logo").src = designerObj.pictureUIObj.logo.filepath;
				//alert(designerObj.pictureUIObj.background.filepath);
			}else{
			    //设置logo图片为空
			    designerObj.pictureUIObj.logo.filepath = "";
			    designerObj.pictureUIObj.logo.filename = "";
			    designerObj.pictureUIObj.logo.filetype = "";
			    parent.document.getElementById("logo").src = "";
			    parent.document.getElementById("logo").style.display="none";
			}
			cancelButton();
		
	}
	
	function callback(msg){  
        //document.getElementById("file").outerHTML = document.getElementById("file").outerHTML;  
        document.getElementById("msg").innerHTML = "<font color=red>"+msg+"</font>";  
    }  
	
  </script>
</html>

 
feng547
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值