input file表单上传控件的动态化

本文主要是介绍input file表单上传控件的动态化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<!--上传控件样式-->
<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();
}