JS实现动态添加图片上传,多个单图添加

HTML代码:
  <tr class=tdbg >
        <td  valign="middle"  align="right" >产品图组:</td>
        <td >图推荐尺寸:376*376        </td>
      </tr>
	    <tr class=tdbg ><td  colspan=2 >
           <div id="sch2">
		<div id="xingcheng-box">
			<div class="daysbox"><dl>
		        <dt><b>第1张:</b><em></em></dt><dd><input name="smallpic0" value="" id="smallpic0" type="TEXT" size=35 maxlength=100 >   
			<span onClick="javascript:previewObj('img','',document.Gforms.smallpic0.value)" class="preview">查看</span>  
			<span onClick="javascript:delFile('',document.Gforms.smallpic0)" class="preview">删除</span> 
			<iframe src="../ueditor/sanways_upload.asp?u=smallpic0" scrolling="no" topmargin="0" width="300" height="24" marginwidth="0" marginheight="0" frameborder="0" align="center"></iframe></dd>
		        </dl>
                        </div>
		</div>
		<div class=xingchengadd>
			<a href="#?" οnclick="xingcheng_add_day();return false;"><img src='../img/btn_add.gif' class='pointer' align='absmiddle'/> 添加第<b id="xingcheng-next-day-no">2</b>张</a>
			<input type="hidden" id="xing_day" name="xing_day" value="1" />
		</div>
	   </div></td></tr> 

JS代码:

<script language="javascript" type="text/javascript">

  		//添加行程
		function has_css_class_name(elem,cname){
		    return(elem&&cname)?new RegExp('\\b'+cname+'\\b').test(elem.className):false;
		}
	    function xingcheng_add_day(){
	    	
			var div = $$('xingcheng-box');
		
			var i,days=0;
			var last_set_node = null;
			var ds = div.getElementsByTagName('DIV');
		
			for(i=0;ds.length && i<ds.length;i++){
			    var node = ds[i];
			    if(has_css_class_name(node,'daysbox')){
					days++;
					last_set_node = node;
			    }
			}

			var node = document.createElement('div');
			//alert(days/2);
			(days+1)%2==0?node.className='fileset daysbox':node.className='daysbox';
			node.innerHTML = '<dl>'
				+'<dt><b>第'+(days+1)+'张:</b><em> </em></dt><dd><input name="smallpic'+days+'" value="" id="smallpic'+days+'" type="TEXT" size=35 maxlength=100 >   <span onClick="javascript:previewObj(\'img\',\'\',document.Gforms.smallpic'+days+'.value)" class="preview">查看</span>  <span onClick="javascript:delFile(\'\',document.Gforms.smallpic'+days+')" class="preview">删除</span> <iframe src="../ueditor/sanways_upload.asp?u=smallpic'+days+'" scrolling="no" topmargin="0" width="300" height="24" marginwidth="0" marginheight="0" frameborder="0" align="center"></iframe> <a id="remove_day'+(days+1)+'" href="#" οnclick="xingcheng_remove_day();return false;">删除</a></dd>'
				+'</dl>'
 


			
			div.insertBefore(node,last_set_node.nextSibling);
			
			$$('xingcheng-next-day-no').innerHTML = days+2;  //计数
			
			if ($$('remove_day'+$$("xing_day").value)){
				$$('remove_day'+$$("xing_day").value).style.display = 'none';
			}
			$$("xing_day").value=$$("xing_day").value*1+1;
		
			
	    }
	    function xingcheng_remove_day()
	    {
			var div = $$('xingcheng-box');
			
			var i,days=0;
			var last_set_node = null;
			var ds = div.getElementsByTagName('div');
			
			for(i=0;ds.length && i<ds.length;i++){
			    var node = ds[i];
			    if(node.className.indexOf('daysbox') > -1){
					days++;
					last_set_node = node;
			    }
			}
			
			if(days <= 1) return;
			last_set_node.parentNode.removeChild(last_set_node);
			
			$$('xingcheng-next-day-no').innerHTML = days;

			$$("xing_day").value=$$("xing_day").value*1-1;
			if ($$('remove_day'+$$("xing_day").value)){
				$$('remove_day'+$$("xing_day").value).style.display = '';
			}
			
			
			
	    }
		
		

		 
		 

	
</script>




  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
FastAdmin默认使用WebUploader进行多图上,可以通过修改上控件的配置,实现每个图片添加一个描述的需求。以下是具体步骤: 1. 在需要添加多图上的表单页面中,添加一个文本框用于输入每个图片的描述信息。 2. 在控制器中,将文本框的name属性值作为webuploader的描述字段递给视图页面。 例如,在编辑页面中添加一个文本框: ```html <div class="form-group"> <label class="col-sm-2 control-label">图片描述</label> <div class="col-sm-8"> <input type="text" class="form-control" name="desc[]" placeholder="请输入图片描述" value="<?php echo htmlentities($vo['desc']); ?>"> </div> </div> ``` 在控制器中,将文本框的name属性值作为webuploader的描述字段递给视图页面: ```php // 图片 $this->assign('upload', [ 'url' => url('upload/image'), 'name' => 'file', 'data' => [ 'thumb' => 1, 'water' => 1, 'desc' => 'desc[]' // 添加图片描述 ] ]); ``` 3. 在webuploader的上控件中,添加描述字段,并将描述字段作为参数递给后台。 例如,在webuploader的上控件中,添加描述字段: ```javascript uploader = WebUploader.create({ ... formData: { ... desc: desc // 描述字段 } }); ``` 在后台处理上图片时,可以通过获取上控件递的描述字段,将描述信息存储到数据库中。 例如,在处理上图片的控制器方法中,获取描述字段: ```php $desc = $this->request->post('desc/a', []); ``` 然后,将描述信息与上图片一起存储到数据库中。 这样,就实现了每个上图片添加一个描述的需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值