如何优化Jquery代码以显示多个文件上传？

我正在构建一个文件上载部分视图，以便在几个不同的页面之间共享。我们现在最多有5个文件，但我希望每个文件的最大值都由页面通过ViewBag或类似的简单方式设置。我目前有五种不同的功能，可以在单击“删除”按钮时清除和隐藏输入，当按错顺序单击删除时，“添加另一个文件”链接的行为与我所希望的不一样。它读取一个输入，但无论“最高”删除的输入在哪里，直到用户尝试添加第六个输入，它才清除何时再次达到限制。这是我的代码，任何消除这些烦恼的建议都将不胜感激

<script>
$(document).ready(function () {
    $('.upload2').hide();
    $('.upload3').hide();
    $('.upload4').hide();
    $('.upload5').hide();

    $('.showNext').click(function () {
        if (!$('.upload2').is(':visible')){
            $('.upload2').show();
        }
        else if (!$('.upload3').is(':visible')) {
            $('.upload3').show();
        }
        else if (!$('.upload4').is(':visible')) {
            $('.upload4').show();
        }
        else if (!$('.upload5').is(':visible')) {
            $('.upload5').show();
            $('.showNext').hide();
        }
        else {
            $('.showNext').hide();
        }

    });
});

function upload2Clear() {
    $('.upload2').hide('slow');
    $('.FileUpload2').val('');
    $('.DescriptionUpload2').val('');
    $('.showNext').show();
}

function upload3Clear() {
    $('.upload3').hide('slow');
    $('.FileUpload3').val('');
    $('.DescriptionUpload3').val('');
    $('.showNext').show();
}

function upload4Clear() {
    $('.upload4').hide('slow');
    $('.FileUpload4').val('');
    $('.DescriptionUpload4').val('');
    $('.showNext').show();
}

function upload5Clear() {
    $('.upload5').hide('slow');
    $('.FileUpload5').val('');
    $('.DescriptionUpload5').val('');
    $('.showNext').show();
}

$（文档）.ready（函数（）{
$（'.upload2'）.hide（）；
$（'.upload3'）.hide（）；
$（'.upload4'）.hide（）；
$（'.upload5'）.hide（）；
$（'.showNext'）。单击（函数（）{
如果（！$（'.upload2'）。是（':visible'））{
$（'.upload2'）.show（）；
}
如果（！$（'.upload3'）。是（':visible'），则为else{
$（'.upload3'）.show（）；
}
如果（！$（'.upload4'）。是（':visible'），则为else{
$（'.upload4'）.show（）；
}
如果（！$（'.upload5'）。是（':visible'），则为else{
$（'.upload5'）.show（）；
$（'.showNext'）.hide（）；
}
否则{
$（'.showNext'）.hide（）；
}
});
});
函数upload2Clear（）{
$（'.upload2'）.hide（'slow'）；
$（'.FileUpload2'）.val（''）；
$（'.DescriptionUpload2'）.val（''）；
$（'.showNext'）.show（）；
}
函数upload3Clear（）{
$（'.upload3'）.hide（'slow'）；
$（'.FileUpload3'）.val（''）；
$（'.DescriptionUpload3'）.val（''）；
$（'.showNext'）.show（）；
}
函数upload4Clear（）{
$（'.upload4'）.hide（'slow'）；
$（'.FileUpload4'）.val（''）；
$（'.DescriptionUpload4'）.val（''）；
$（'.showNext'）.show（）；
}
函数upload5Clear（）{
$（'.upload5'）.hide（'slow'）；
$（'.FileUpload5'）.val（''）；
$（'.DescriptionUpload5'）.val（''）；
$（'.showNext'）.show（）；
}

上传文件




说明：



说明：



说明：



说明：



说明：

为什么不使用jquery库，比如

uploadify

或者其他什么呢？老实说，对jquery缺乏经验，也不知道存在类似的东西。您认为哪些有用的链接是首选资源@MuhammadHaseebKhan

uploadify.com

最适合多次上传，而且它拥有您想要的一切

<h4>Upload a File</h4>


<div class="showNext" style="position:absolute; left:33%;"><a href="javascript:void(0)">Add Another File</a></div><br />
<div style="position:absolute; left:33%;"><input type="submit" value="Upload" /></div>

<div class="upload1"><input type="file" name="FileUpload1" /><br />
    <label>Description:<br /><input type="text" name="DescriptionUpload1" size="50" maxlength="200" /></label>
</div>
<div class="upload2"><input type="file" name="FileUpload2" class="FileUpload2" />&nbsp;
    <img src="~/Images/remove.png" style="cursor: pointer;" onclick="upload2Clear();"/><br />
    <label>Description:<br /><input type="text" name="DescriptionUpload2" class="DescriptionUpload2" size="50" maxlength="200" /></label>
</div>
<div class="upload3"><input type="file" name="FileUpload3" class="FileUpload3" />&nbsp;
    <img src="~/Images/remove.png" style="cursor: pointer;" onclick="upload3Clear();"/><br />
    <label>Description:<br /><input type="text" name="DescriptionUpload3" class="DescriptionUpload3" size="50" maxlength="200" /></label>
</div>
<div class="upload4"><input type="file" name="FileUpload4" class="FileUpload4" />&nbsp;
    <img src="~/Images/remove.png" style="cursor: pointer;" onclick="upload4Clear();"/><br />
    <label>Description:<br /><input type="text" name="DescriptionUpload4" size="50" maxlength="200" /></label>
</div>
<div class="upload5"><input type="file" name="FileUpload5" class="FileUpload5" />&nbsp;
    <img src="~/Images/remove.png" style="cursor: pointer;" onclick="upload5Clear();"/><br />
    <label>Description:<br /><input type="text" name="DescriptionUpload5" class="DescriptionUpload5" size="50" maxlength="200" /></label>
</div>