How to upload multiple file using javascript? (Add more)
How to Upload More Files ?
File name : index.php
<div class="morefiles hidediv">
<div class="form-group">
<div class="col-md-12">
<div class="form-group row">
<label for="inputKey" class="col-md-3 control-label">Upload Document(if any) </label>
<div class="col-md-7">
<input type="file" id="docfile1" name="attachment[]" class="form-control" onchange="Validatefile(this.id,this.value)" >
<span class="required" aria-required="true">(Only PDF,JPG,PNG files are allowed, Maximum 10 files of 5MB each can be attached)</span>
<span class="required" id="upload_error" aria-required="true"></span>
</div>
<div class="col-md-2">
<button class="btn btn-success btn-sm" type="button" id="addfile" title="Add new file">Add More</button>
</div>
</div>
</div>
</div>
</div>
File name : index.php
<script>
function Validatefile(id,val){
var image =$('#'+id).val();
if(image!=''){
var checkimg = image.toLowerCase();
if (!checkimg.match(/(\.jpg|\.png|\.JPG|\.PNG|\.jpeg|\.JPEG|\.pdf)$/)){
$('#'+id).focus();
alert("Invalid file extension, Only jpg,jpeg,png,bmp,pdf files are Allowed");
$('#'+id).val('');
return false;
}
var img = document.getElementById(id);
var fsize=img.files[0].size;
const file = Math.round((fsize / 1024));
if(file >= 5000) {
alert("File size too large, Please select a file less than 5mb");
$('#'+id).val("");
return false;
}
return true;
}
}
</script>
File name : index.php
<script type="text/javascript">
$(document).ready(function() {
var countupl = 2;
$("#addfile").click(function() {
if(countupl <= 10){
$(".morefiles").append('<div class="form-group" id="other_doc_'+countupl+'"><div class="col-md-12"><div class="form-group row"><div class="col-md-7 offset-md-3 "><input type="file" id="docfile'+countupl+'" name="attachment[]" class="form-control" onchange="Validatefile(this.id,this.value)"></div><div class="col-md-2"><a href="javascript:void(0);" id="'+countupl+'" class="remove_button btn btn-danger btn-sm "><i class="fas fa-trash"></i></a></div></div></div></div>');
countupl++;
}else{
swal("error!", "You can Upload Maximum 10 Files only", "error");
}
});
$(".morefiles").on('click', '.remove_button', function(e){
e.preventDefault();
var currentrow = this.id;
document.getElementById("other_doc_"+currentrow).remove();
countupl--;
});
});
</script>
Add More Example:
File name :
<input type="hidden" id="trow_counter" value="1"/>
<div class="" id="mgmt_details" style="">
<div class="row border border-light mb-2" >
<div class="col-md-3">
<div class="form-group">
<label for="formGroupExampleInput">QUALIFICATION</label>
<select class="form-control" name="qualification[]" id="qualification" value="">
<option value="" selected="selected" disabled="disabled">Qualification</option>
<?php if($yp_activity == '1')
{
?>
<option value="10th"> Matriculation (10th)</option>
<option value="12th"> Intermediate (12th)</option>
<option value="B.Tech"> B.Tech</option>
<option value="B.E."> B.E.</option>
<option value="B.Tech Equivalent"> B.Tech Equivalent</option>
<option value="P.G"> Post Graduation (P.G)</option>
<?php } else{ ?>
<option value="10th"> Matriculation (10th)</option>
<option value="12th"> Intermediate (12th)</option>
<option value="B.Tech"> B.Tech</option>
<option value="B.E."> B.E.</option>
<option value="B.Tech Equivalent"> B.Tech Equivalent</option>
<option value="Graduation">Graduation</option>
<option value="P.G"> Post Graduation (P.G)</option>
<option value="D.E"> Diploma Engineering</option>
<?php } ?>
</select>
<span class="required" id="qualification_error" aria-required="true"></span>
<span class="error"><?php echo form_error('qualification'); ?></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="formGroupExampleInput2">UNIVERSITY NAME</label>
<input type="text" class="form-control" id="university_name" name="university_name[]" value="<?php echo set_value('university_name'); ?>" placeholder="COLLEGE NAME/ UNIVERSITY NAME" maxlength="128" />
<span class="required" id="university_name_error" aria-required="true"></span>
<span class="error"><?php echo form_error('university_name'); ?></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="formGroupExampleInput2">TITLE OF DEGREE</label>
<input type="text" class="form-control" id="title_of_degree" name="title_of_degree[]" value="<?php echo set_value('title_of_degree'); ?>" placeholder="STREAM/ TITLE OF DEGREE" maxlength="128" />
<span class="required" id="title_of_degree_error" aria-required="true"></span>
<span class="error"><?php echo form_error('title_of_degree'); ?></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="formGroupExampleInput2">PASSING YEAR</label>
<select class="form-control" name="year_of_passing[]" id="year_of_passing">
<option value="" selected="selected" disabled="disabled">Year</option>
<?php for($i=1970; $i<=2021; $i++){ ?>
<option value="<?php echo $i;?>" <?php if(set_value('year_of_passing')== $i){ echo 'selected'; } ?>><?php echo $i;?></option>
<?php } ?>
</select>
<span class="error"><?php echo form_error('year_of_passing'); ?></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="formGroupExampleInput2">PERCENTAGE MARKS</label>
<input type="text" class="form-control" id="percentage_marks" name="percentage_marks[]" onblur="ValidateValue(this.value)" placeholder="%" value="<?php echo set_value('percentage_marks'); ?>"maxlength="6" />
<span class="required" id="percentage_marks_error" aria-required="true"></span>
<span class="error"><?php echo form_error('percentage_marks'); ?></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="formGroupExampleInput2">MARKSHEET</label>
<input type="file" id="marksheet" name="marksheet[]" class="" onchange="Validatefile_onlypdf(this.id,this.value)" >
<span class="required" id="marksheet_error" aria-required="true"></span>
<span class="help-block" style="color:red;"><?php echo form_error('marksheet'); ?></span>
<?php if($_SESSION['error_marksheet']!=''){ ?>
<p class="text-danger"><?php echo $_SESSION['error_marksheet'];
unset($_SESSION['error_marksheet']);
?></p>
<?php } ?>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="formGroupExampleInput2">DEGREE CERTIFICATE</label>
<input type="file" id="degree_certificate" name="degree_certificate[]" class="" onchange="Validatefile_onlypdf(this.id,this.value)" multiple>
<span class="required" id="degree_certificate_error" aria-required="true"></span>
<span class="help-block" style="color:red;"><?php echo form_error('degree_certificate'); ?></span>
<?php if($_SESSION['error_degree_certificate']!=''){ ?>
<p class="text-danger"><?php echo $_SESSION['error_degree_certificate'];
unset($_SESSION['error_degree_certificate']);
?></p>
<?php } ?>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="formGroupExampleInput2"> </label>
<div class="col-md-12"> <a href="javascript:add_edu()" class="btn btn-primary"> <i class="fa fa-plus"></i> Add</a>
</div>
</div>
</div>
</div> <!-- end row -->
<hr>
</div>
script
File name :
<script>
function add_edu(){
var formFiled = true;
$('#mgmt_details input').each(function()
{
if($(this).val() == "") formFiled = false;
});
if (!formFiled) {
alert("Please provide all input data!");
exit;
}
var id=$("#trow_counter").val();
id = eval(parseInt(id)+1);
if(id<=5){
var html = '<div class="row" id="trow'+id+'"><div class="col-md-3"><div class="form-group"><label for="formGroupExampleInput">QUALIFICATION</label><select class="form-control" name="qualification[]" id="qualification" value=""><option value="" selected="selected" disabled="disabled">Qualification</option><?php if($yp_activity == '1'){?><option value="10th"> Matriculation (10th)</option><option value="12th"> Intermediate (12th)</option><option value="B.Tech"> B.Tech</option><option value="B.E."> B.E.</option><option value="B.Tech Equivalent"> B.Tech Equivalent</option><option value="P.G"> Post Graduation (P.G)</option><?php } else{ ?><option value="10th"> Matriculation (10th)</option><option value="12th"> Intermediate (12th)</option><option value="B.Tech"> B.Tech</option><option value="B.E."> B.E.</option><option value="B.Tech Equivalent"> B.Tech Equivalent</option><option value="Graduation">Graduation</option><option value="P.G"> Post Graduation (P.G)</option><option value="D.E"> Diploma Engineering</option><?php } ?></select></div></div><div class="col-md-3"><div class="form-group"><label for="formGroupExampleInput2">UNIVERSITY NAME</label><input type="text" class="form-control" id="university_name" name="university_name[]" value="<?php echo set_value('university_name'); ?>" placeholder="COLLEGE NAME/ UNIVERSITY NAME" maxlength="128" /></div></div><div class="col-md-3"><div class="form-group"><label for="formGroupExampleInput2">TITLE OF DEGREE</label><input type="text" class="form-control" id="title_of_degree" name="title_of_degree[]" value="<?php echo set_value('title_of_degree'); ?>" placeholder="STREAM/ TITLE OF DEGREE" maxlength="128" /></div></div><div class="col-md-3"><div class="form-group"><label for="formGroupExampleInput2">PASSING YEAR</label><select class="form-control" name="year_of_passing[]" id="year_of_passing"><option value="" selected="selected" disabled="disabled">Year</option><?php for($i=1970; $i<=2021; $i++){ ?><option value="<?php echo $i;?>" <?php if(set_value('year_of_passing')== $i){ echo 'selected'; } ?>><?php echo $i;?></option><?php } ?> </select></div></div><div class="col-md-3"><div class="form-group"><label for="formGroupExampleInput2">PERCENTAGE MARKS</label><input type="text" class="form-control" id="percentage_marks" name="percentage_marks[]" onblur="ValidateValue(this.value)" placeholder="%" value="<?php echo set_value('percentage_marks'); ?>"maxlength="6" /></div></div><div class="col-md-3"><div class="form-group"><label for="formGroupExampleInput2">MARKSHEET</label><input type="file" id="marksheet" name="marksheet[]" class="" onchange="Validatefile_onlypdf(this.id,this.value)"></div></div><div class="col-md-3"><div class="form-group"><label for="formGroupExampleInput2">DEGREE CERTIFICATE</label><input type="file" id="degree_certificate" name="degree_certificate[]" class="" onchange="Validatefile_onlypdf(this.id,this.value)" multiple></div></div><div class="col-md-3"><div class="form-group"><label for="formGroupExampleInput2"> </label><div class="col-md-12"> <a href="javascript:remove_Row(\'trow'+id+'\')" class="btn btn-warning"><i class="fa fa-minus" aria-hidden="true"></i></a></div></div></div><hr></div>';
$("#mgmt_details").append(html);
$("#trow_counter").val(id.toString());
}
else{
swal("error!", "You can Add Maximum 10 Rows only", "error");
}
}
function remove_Row(row){
var id=$("#trow_counter").val();
alert(id);
$("#"+row).remove();
id--;
$("#trow_counter").val(id);
}
</script>
add more using html table
File name :
<script type="text/javascript">
var id=1;
$("#add_edu_detail").click(function (e) {
e.preventDefault();
let qualification = $("#qualification").val();
let university_name = $("#university_name").val();
let title_of_degree = $("#title_of_degree").val();
let year_of_passing = $("#year_of_passing").val();
let percentage_marks = $("#percentage_marks").val();
let marksheet = $("#marksheet").val();
//let degree_certificate = $("#degree_certificate").val();
if(qualification==''){
$("#qualification").focus();
alert('Please Select Qualification');
return false;
} else if(university_name=='')
{
$("#university_name").focus();
alert('Please College Name/University Name');
return false;
} else if(title_of_degree=='')
{
$("#title_of_degree").focus();
alert('Please Title of Degree');
return false;
} else if(year_of_passing=='')
{
$("#year_of_passing").focus();
alert('Please Select Year of Passing');
return false;
} else if(percentage_marks=='')
{
$("#percentage_marks").focus();
alert('Please Enter percentage marks');
return false;
}
else if($('#marksheet').val() == '')
{
$("#marksheet").focus();
alert('Please Select marksheet');
return false;
}
else if($('#degree_certificate').val() == '')
{
$("#degree_certificate").focus();
alert('Please Select degree certificate');
return false;
}
var newid = id++;
console.log("gey start id"+newid);
if(qualification!='' && university_name!='' && title_of_degree!='' && year_of_passing!='' && percentage_marks!=''){
var html ='<tr id="'+newid+'">';
html +='<td>'+newid+'</td>';
html +='<td><input type="text" id="manuf_name" name="qualification[]" value="'+qualification+'" class="form-control" readonly /></td>';
html +='<td><input type="text" id="address" name="university_name[]" value="'+university_name+'" class="form-control" readonly /></td>';
html +='<td><input type="text" id="state" name="title_of_degree[]" value="'+title_of_degree+'" class="form-control" readonly /></td>';
html +='<td><input type="text" id="district" name="year_of_passing[]" value="'+year_of_passing+'" class="form-control" readonly /></td>';
html +='<td><input type="text" id="email" name="percentage_marks[]" value="'+percentage_marks+'" class="form-control" readonly /></td>';
html +='<td><input type="file" id="mark" name="marksheet[]" value="'+marksheet+'" class="form-control" readonly /></td>';
html +='<td><a href="javascript:void(0);" class=" btn btn-danger remove_manudetails">Remove</a></td>';
html +='</tr>';
$("#edu_details_info").append(html);
$("#edu_details_info").on('click','.remove_manudetails',function(){
$(this).parent().parent().remove();
});
$("#qualification").val('');
$('#university_name').val('');
$('#title_of_degree').val('');
$('#year_of_passing').val('');
$('#percentage_marks').val('');
}
//alert('Please enter Manufacture Details');
i++;
});
</script>
Previous
Next