<!--上传控件样式--> <script type="text/javascript" src= "../bootstrap-fancyfile.min.js"> </script> <link href="../bootstrap-fancyfile.min.css" rel="stylesheet" type="text/css"/><!--页面代码--><div id="mdiv"> <div class="form-group"> <div class="col-md-14"> <div class="fancy-file" style="margin-left: 130px;"> <div class="fake-file"> <span class="redcolor">*</span> <input class="fake-input form-control" id="fileimgvaluename" name="fileimgvaluename" type="text" placeholder="上传缩略图" style="width: 183px; height: 34px;margin-left: 15px;"> <button class="btn btn-primary" style="margin-left:-5px;height: 34px;"> <i class="glyphicon glyphicon-file icon-white"></i> 浏览缩略图 </button> <input type="button" class="btn btn-success closeimgfilename" οnclick="javascript:addimg()" value="继续添加" style="margin-left:-6px;height: 34px;"> </input> </div> <input class="btn-info" οnchange="fileimgvaluename.value=this.value" type="file" name="fileimgname" id="fileimgname" style="margin-left:190px;width: 110px;height: 34px"> </div> </div> </div> </div><script> jQuery(document).ready(function () {bindListener();//动态添加图片 }); </script><!--js-->//动态添加多张图片 // 用来绑定事件(使用unbind避免重复绑定) var i=0; function bindListener() { $("a[name=removelink]").unbind().click(function () { $(this).parent().parent().parent().parent().remove(); i=i-1; }) } function addimg() { i++; var fileimgvaluenamea="fileimgvaluenametext"+i;//这是文本域id var fileimgvaluenameb="fileimgvaluenamefile"+i;//这是上传id var a='<div class="form-group"><div class="col-md-14"> <div class="fancy-file" style="margin-left: 145px;">' + '<div class="fake-file"> <span class="redcolor">*</span><input class="fake-input form-control" id="' + fileimgvaluenamea + '"' + 'name="' + fileimgvaluenamea + '" type="text" placeholder="上传缩略图" style="width: 185px; height: 34px;">' + '<button class="btn btn-primary" style="margin-left:0px;width:118px;height: 34px;"><i class="glyphicon glyphicon-file icon-white"></i>浏览缩略图 </button>' + '<a class="btn btn-danger" href="#" name="removelink" style="margin-left:-6px;height: 34px;">消除</a> ' + /*'<input type="button" class="btn btn-success" οnclick="javascript:addimg()" value="继续添加" style="margin-left:-6px;height: 34px;"/>' +*/ '</div><input class="btn-info"'; var b='type="file" name="'+fileimgvaluenameb+'" id="'+fileimgvaluenameb+'" style="margin-left:190px;width: 110px;height: 34px"/></div></div></div>'; if(i>7){ i=7; alert('最多只能上传8张图片'); } else { var c="";//获取上传fileid对应的文本域id switch(i){ case 1: c='οnchange="fileimgvaluenametext1.value=this.value"'; break; case 2: c='οnchange="fileimgvaluenametext2.value=this.value"'; break; case 3: c='οnchange="fileimgvaluenametext3.value=this.value"'; break; case 4: c='οnchange="fileimgvaluenametext4.value=this.value"'; break; case 5: c='οnchange="fileimgvaluenametext5.value=this.value"'; break; case 6: c='οnchange="fileimgvaluenametext6.value=this.value"'; break; case 7: c='οnchange="fileimgvaluenametext7.value=this.value"'; break; } $("#mdiv").append(a+c+b); } // 为新元素节点添加事件侦听器 bindListener(); }
input file表单上传控件的动态化
最新推荐文章于 2019-05-30 17:33:25 发布