0

我正在构建一个文件上传部分视图，以便在几个不同的页面之间共享。我们现在最多有 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();
}


<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>
4

0 回答 0