3:58 AM
Within forms, many times we need to empower users to enter one or more files. In some cases you may need to perform the upload of multiple files, without knowing in advance how they might be.
Limit the number of inputs for uploading files is sometimes not the best choice, so we could give the user a chance to put other files in his complete autonomy.
This post explains how to use jQuery without any plugins for creating html for inserting multiple fileupload.
We start from a simple html page that contains only those elements essential for this application:
<!DOCTYPE html>
<html>
<head>
<title>Multiupload file</title>
<script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="Scripts/JScript.js"></script>
</head>
<body>
<div class="container">
<button id="btAddFileUpload" type="button">Add file</button>
<div id="fileUp1">
<input id="File1" type="file" />
<button id="btDelete1" type="button" value="1" onclick="javascript:deleteUpload(value)">Delete</button>
</div>
<input id="Submit1" type="submit" value="Submit" />
</div>
</body>
</html>
I copied into my "Scripts" directory latest jQuery library version, but you can refer it in the classic mode by Google:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
I wrote my JavaScript code in an external file called "JScript.js" and referenced in html script tag. This is the code:
$(document).ready(function () {
$('#btAddFileUpload').click(add);
});
//upload file tags counter
var count = 1;
//add fileupload method
function add() {
//upload file tags increase
count++;
//clone div tag with all children elements
var copied = $('#fileUp1').clone(true);
//increase all children tags ids
$('input:file', copied).attr('id', 'File' + count);
$('button', copied).attr(
{ id: 'btDelete' + count,
value: count
}
);
//increase div tag id
$(copied).attr('id', 'fileUp' + count);
/* another mode to change attribute names
copied.children('input').attr('id', 'File' + count);
copied.children('button').attr('id', 'btDelete' + count);
*/
//append copied div and relative children tags in container div, but before submit button
$(copied).appendTo('.container').insertBefore('#Submit1');
}
//delete method fileupload method
function deleteUpload(id) {
//remove file upload (parent div and childrens)
if (count > 1) {
//decrease total amount of uploadfile tags
count--;
var nameElemToDelete = '#fileUp' + id;
$(nameElemToDelete).remove();
}
//to avoid holes, recalculating all the ids after the removed one
for (indx = id; indx <= count; indx++) {
var inputDiv = $('#fileUp' + (parseInt(indx) + 1));
$(inputDiv).attr('id', 'fileUp' + indx);
$('input:file', inputDiv).attr('id', 'File' + indx);
$('button', inputDiv).attr(
{ id: 'btDelete' + indx,
value: indx
}
);
}
}
At the begin, I call the $(document).ready jQuery statement to join the add function to add button at the startup (page entirely loaded).
Each time you click on the button "btAddFileUpload", all you clone the "
" tag including its children, renaming the id attributes with a new name including the number increases by one.
All this is done using the jQuery methos "clone" on an object (tag) that you want to replicate.
With "deleteUpload" function you can delete the same tag (and all its childrens) and recalculate all ids to avoid holes. This was done to iterate over all the inputs file without any problems.
Limit the number of inputs for uploading files is sometimes not the best choice, so we could give the user a chance to put other files in his complete autonomy.
This post explains how to use jQuery without any plugins for creating html for inserting multiple fileupload.
We start from a simple html page that contains only those elements essential for this application:
<!DOCTYPE html>
<html>
<head>
<title>Multiupload file</title>
<script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="Scripts/JScript.js"></script>
</head>
<body>
<div class="container">
<button id="btAddFileUpload" type="button">Add file</button>
<div id="fileUp1">
<input id="File1" type="file" />
<button id="btDelete1" type="button" value="1" onclick="javascript:deleteUpload(value)">Delete</button>
</div>
<input id="Submit1" type="submit" value="Submit" />
</div>
</body>
</html>
I copied into my "Scripts" directory latest jQuery library version, but you can refer it in the classic mode by Google:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
I wrote my JavaScript code in an external file called "JScript.js" and referenced in html script tag. This is the code:
$('#btAddFileUpload').click(add);
});
//upload file tags counter
var count = 1;
//add fileupload method
function add() {
//upload file tags increase
count++;
//clone div tag with all children elements
var copied = $('#fileUp1').clone(true);
//increase all children tags ids
$('input:file', copied).attr('id', 'File' + count);
$('button', copied).attr(
{ id: 'btDelete' + count,
value: count
}
);
//increase div tag id
$(copied).attr('id', 'fileUp' + count);
/* another mode to change attribute names
copied.children('input').attr('id', 'File' + count);
copied.children('button').attr('id', 'btDelete' + count);
*/
//append copied div and relative children tags in container div, but before submit button
$(copied).appendTo('.container').insertBefore('#Submit1');
}
//delete method fileupload method
function deleteUpload(id) {
//remove file upload (parent div and childrens)
if (count > 1) {
//decrease total amount of uploadfile tags
count--;
var nameElemToDelete = '#fileUp' + id;
$(nameElemToDelete).remove();
}
//to avoid holes, recalculating all the ids after the removed one
for (indx = id; indx <= count; indx++) {
var inputDiv = $('#fileUp' + (parseInt(indx) + 1));
$(inputDiv).attr('id', 'fileUp' + indx);
$('input:file', inputDiv).attr('id', 'File' + indx);
$('button', inputDiv).attr(
{ id: 'btDelete' + indx,
value: indx
}
);
}
}
At the begin, I call the $(document).ready jQuery statement to join the add function to add button at the startup (page entirely loaded).
Each time you click on the button "btAddFileUpload", all you clone the "
" tag including its children, renaming the id attributes with a new name including the number increases by one.
All this is done using the jQuery methos "clone" on an object (tag) that you want to replicate.
With "deleteUpload" function you can delete the same tag (and all its childrens) and recalculate all ids to avoid holes. This was done to iterate over all the inputs file without any problems.
