To make my weppage as compatible as possible I will go with the regular file input, the problem is that I need to offer multiple uploads.
My thought is that when the first input is set a second will be shown (up to a max of 10). Say that we have filled 5 and there is 6 visible. We now clear the second input, this will result in two empty inputs so then the last(6(empty)) input should be hidden.
Is this possible to to with Jquery?
Edit1: This is what I manage to create, it works fine. I am however sure that someone that know jquery better could make a smarter script:
In the view:
<div id="fileInput0" class="fileVisible">
<input type="file" id="file0" name="files" />
<input type="button" value="Töm" onclick="resetFileField(0)" />
</div>
<div id="fileInput1" class="fileHidden">
<input type="file" id="file1" name="files" />
<input type="button" value="Töm" onclick="resetFileField(1)" />
</div>
<div id="fileInput2" class="fileHidden">
<input type="file" id="file2" name="files" />
<input type="button" value="Töm" onclick="resetFileField(2)" />
</div>
<div id="fileInput3" class="fileHidden">
<input type="file" id="file3" name="files" />
<input type="button" value="Töm" onclick="resetFileField(3)" />
</div>
<div id="fileInput4" class="fileHidden">
<input type="file" id="file4" name="files" />
<input type="button" value="Töm" onclick="resetFileField(4)" />
</div>
<div id="fileInput5" class="fileHidden">
<input type="file" id="file5" name="files" />
<input type="button" value="Töm" onclick="resetFileField(5)" />
</div>
<div id="fileInput6" class="fileHidden">
<input type="file" id="file6" name="files" />
<input type="button" value="Töm" onclick="resetFileField(6)" />
</div>
<div id="fileInput7" class="fileHidden">
<input type="file" id="file7" name="files" />
<input type="button" value="Töm" onclick="resetFileField(7)" />
</div>
<div id="fileInput8" class="fileHidden">
<input type="file" id="file8" name="files" />
<input type="button" value="Töm" onclick="resetFileField(8)" />
</div>
<div id="fileInput9" class="fileHidden">
<input type="file" id="file9" name="files" />
<input type="button" value="Töm" onclick="resetFileField(9)" />
</div>
The Script:
function fileChangeHandler() {
var hiddenClass = 'fileHidden';
var visibleClass = 'fileVisible';
var parentDiv = $(this).parent;
var idNr = $(this).attr('id').replace('file', '');
idNr++;
if($(this).val().length > 0){
for(var i = idNr; i < 10; i++){
if($('#fileInput' + i).hasClass(visibleClass)){
if($('#file' + i).val().length < 1){ return;}
}
else{
$('#fileInput' + i).attr('class' , visibleClass);
return;
}
}
}
}
function resetFileField(id) {
var hiddenClass = 'fileHidden';
var visibleClass = 'fileVisible';
var counter;
$('#fileInput'+id).html($('#fileInput'+id).html());
$('#file'+id).change(fileChangeHandler);
for(var i = 9; i > -1 ;i--)
{
if(id != i)
{
if($('#fileInput' + i).hasClass(visibleClass)){
if($('#file' + i).val().length < 1){
$('#fileInput' + i).attr('class', hiddenClass);
}
}
}
}
}
What is a better solution?
You could have a container div which will harbor the new file input fields and a button to add new inputs:
$('#addFile').click(function() {
// when the add file button is clicked append
// a new <input type="file" name="someName" />
// to a filesContainer div
$('#filesContainer').append(
$('<input/>').attr('type', 'file').attr('name', 'someName')
);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With