点击增加上传图片表单，并上传图片

在很多时间我们都需要上传或添另一个或多个文件（或添加输入表单等），下面我们将来实现

这里我们使用Kindeditor编辑器的上传图片插件

先引入JS文件

        <script src="Index/js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
        <!-- 编辑器 -->
        <link rel="stylesheet" href="Kindeditor/themes/default/default.css" />
        <script src="Kindeditor/kindeditor.js"></script>
        <script src="Kindeditor/lang/zh_CN.js"></script>
        <script src="Index/js/KindEditor_Upload.js" type="text/javascript" charset="utf-8"></script>

 

HTML内容部份如下：

<script type="text/javascript">
    // kind编辑器上传
    KindEditor.ready(function(K) {
        var editor = K.editor({
            allowFileManager : false    //是否支持浏览图片空间
        });
        //图片上传
        $('.select_image').live('click',function(){
            var image_input_rand    =    $(this).parent().children('input').attr('rand');

            editor.loadPlugin('image', function() {
                editor.plugin.imageDialog({
                showRemote : false,    //支持网络图片
                imageUrl : K("[rand='"+image_input_rand+"']").val(),
                clickFn : function(url, title, width, height, border, align) {
                    K("[rand='"+image_input_rand+"']").val(url);
                    K("[rand_img='"+image_input_rand+"']").html('<img src="'+url+'">');
                    editor.hideDialog();
                }});
            });
        });
    });

</script>
<form id="form1" name="form1" method="post" action="">
<div class="member-con">
	<div class="tit">店铺管理</div>
	<div class="con">
		<dl>
			<dt>店铺简介：</dt>
			<dd>
				<textarea style="height:180px;" placeholder="店铺简介" name="profiles">{$mer.profiles}</textarea>
			</dd>
		</dl>
		<dl>
			<dt>展示图片：</dt>
			<dd id="banner">
				<div class="file">
					<span class="select_image">点击上传</span>
					<input type="hidden" value="" name="banner[img][]" rand="4567887" />
				</div>
				<i class="icon banner_zengjia"></i>
				<div class="images" rand_img="4567887"></div>
				<i>店铺轮播大图（尺寸：1150px * 345px）</i>
				<div style="clear:both;"></div>
			</dd>


			<dd id="showimg">
				<div class="file">
					<span class="select_image">点击上传</span>
					<input type="hidden" value="{$v.img}" name="showimg[img][]" rand="4566787" />
				</div>
				<i class="icon showimg_zengjia"></i>
				<div class="images" rand_img="4566787"></div>
				<i>店铺小图</i>
				<div style="clear:both;"></div>
			</dd>

		</dl>
		<div class="bot">
			<input type="submit" class="btn" value="提  交" />
		</div>
	</div>
</div>
</form>

　　

通过点击 select_image触发上传图片  通过点击showimg_zengjia触发增加一张图片，JS如下

		<script type="text/javascript">
			//打开页面时判断
	        window.onload = function()
	        {
				var banner = $("#banner input").length;
				if (banner >= 3 ) {
					$('.banner_zengjia').hide();
				}
				var banner = $("#showimg input").length;
				if (banner >= 3 ) {
					$('.showimg_zengjia').hide();
				}
	        }


		  //添加轮播相册
		  $('.banner_zengjia').live('click',function(){
		  	var number = lingshi_RndNum(6);
		  	//这里生成一个随机的rand值，目的是使其增加的rand值不一致
		    var banner_html  =  '<div class="file"><span class="select_image">点击上传</span><input type="hidden" value="" name="banner[img][]" rand="'+number+'" /></div><i class="icon banner_zengjia"></i><div class="images" rand_img="'+number+'"></div><i>店铺轮播大图（尺寸：1150px * 345px）</i><div style="clear:both;"></div>';
		    $('#banner').append(banner_html);
		    //计算增加的数据，如果增加数量大于或等于3，则不能再增加
		    var banner = $("#banner input").length;
			if (banner >= 3 ) {
				$('.banner_zengjia').hide();
			}
		  });
		  //添加产品相册
		  $('.showimg_zengjia').live('click',function(){
		  	var number = lingshi_RndNum(6);
		    var showimg_html  =  '<div class="file"><span class="select_image">点击上传</span><input type="hidden" value="" name="showimg[img][]" rand="'+number+'" /></div><i class="icon showimg_zengjia"></i><div class="images" rand_img="'+number+'"></div><i>店铺小图</i><div style="clear:both;"></div>';
		    $('#showimg').append(showimg_html);
		    var banner = $("#showimg input").length;
			if (banner >= 3 ) {
				$('.showimg_zengjia').hide();
			}
		  });
		//随机数函数
		function lingshi_RndNum(n){
		  var rnd="";
		  for(var i=0;i<n;i++)
		    rnd+=Math.floor(Math.random()*10);
		  return rnd;
		}


		</script>

　　

这里我们就完成了