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>




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章