javascript - html 文件类型图像上传后增加文本计数器

Question

我有一个表单，我可以在其中检查用户可以在文本字段中输入的字符限制，并且“onkeyup”属性会实时更新此限制

现在我想对图像上传做同样的事情，一旦用户从他的计算机中选择图像，我就想更新计数器(注意:选择尚未发送表单)。 显示我想做的事情的图片:

如图所示，我希望此处的 0/10 变为 1/10，因为已选择图像(稍后上传):

如果有人好心帮助我，我想利用这个机会就同一问题提出一个附带问题: 我使用的代码如下所示:

<tr>
   <td></td>
   <td><input id="pictureInputBox" type="file"  name="pictureInputBox"/></td>
   <td class="formhelp"></td>
</tr>
<tr>
    <td></td>
    <td><a href="#" id="AddMorePicturesBox" onclick="checkPictureCount();">Add More Pictures</a></td>
    <td class="formhelp"></td>
</tr>

如何在单击链接时显示另一个“pictureInputBox”，并设置最多显示 10 个(一次一个)？

亲切的问候， 丹尼斯

Answer 1

我相信以下内容可以回答您的两个问题:

HTML:

<input type="button" value="add more files" id="add-files" />
<span id="selected-files-counter">0</span>/10 Pictures
<ul id="files-list">
    <li><input type="file" name="photos[]" /></li>
</ul>

JavaScript:

$(document).ready(function(){
    var selectedFilesCounter = 0;
    var fileElementsCounter = 1;
    var filesListEl = $('#files-list');
    var selectedFilesEl = $('#selected-files-counter');

    $('#add-files').click(function(){
        if(fileElementsCounter < 10) {
            filesListEl.append('<li><input type="file" name="photos[]" /></li>');
            fileElementsCounter++;
        }
    });

    $(document).on( 'change', 'input[type=file]', function(e) {
        if($(this).val() === '') {
            selectedFilesCounter--;
        } else {
            selectedFilesCounter++;
        }
        selectedFilesEl.html(selectedFilesCounter);
    });
});

演示:http://jsfiddle.net/j3E7A/