以下是我上传多张图片的表单部分.它有一个add add按钮,可以打开一个新的输入字段.每当用户点击添加更多按钮时,就会打开一个新的输入字段.但是,我希望在第5个输入字段打开后,用户点击再添加更多字段,不会打开新字段(即我希望将输入字段的大小限制为5)
<div id="formdiv"> <form enctype="multipart/form-data" action="" method="post"> <div id="filediv"><input name="file[]" type="file" id="file"/></div><br/> <input type="button" id="add_more" class="upload" value="Add More Files"/> <input type="submit" value="Upload File" name="submit" id="upload" class="upload"/> </form> </div>
处理工作的javascript
var abc = 0; //Declaring and defining global increement variable $(document).ready(function() { //To add new input file field dynamically,on click of "Add More Files" button below function will be executed $('#add_more').click(function() { $(this).before($("<div/>",{id: 'filediv'}).fadeIn('slow').append( $("<input/>",{name: 'file[]',type: 'file',id: 'file'}),$("<br/><br/>") )); }); //following function will executes on change event of file input to select different file $('body').on('change','#file',function(){ if (this.files && this.files[0]) { abc += 1; //increementing global variable by 1 var z = abc - 1; var x = $(this).parent().find('#previewimg' + z).remove(); $(this).before("<div id='abcd"+ abc +"' class='abcd'><img id='previewimg" + abc + "' src=''/></div>"); var reader = new FileReader(); reader.onload = imageIsLoaded; reader.readAsDataURL(this.files[0]); $(this).hide(); $("#abcd"+ abc).append($("<img/>",{id: 'img',src: 'img/x.png',alt: 'delete'}).click(function() { $(this).parent().parent().remove(); })); } }); //To preview image function imageIsLoaded(e) { $('#previewimg' + abc).attr('src',e.target.result); }; $('#upload').click(function(e) { var name = $(":file").val(); if (!name) { alert("First Image Must Be Selected"); e.preventDefault(); } }); });
任何人都可以帮助我应用这个最大限制吗?
解决方法
你需要设置一个计数器.您可以按如下方式更新代码.
var count=0; $('#add_more').click(function() { if(count<5) { $(this).before($("<div/>",$("<br/><br/>") )); count++; } });