以下是我上传多张图片的表单部分.它有一个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++;
}
});
