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

Question

我有一个表单，用于检查用户可以在文本字段中添加的字符数限制以及＆＃39; onkeyup＆＃39;属性实时更新

现在我想对图像上传做同样的事情，只要用户从他的计算机中选择我想要更新计数器的图像（注意：选择尚未发送表格）。 图像显示我想要做的事情：

从图中可以看出，我希望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>

如何制作另一张＆＃34; pictureInputBox＆＃34;单击链接时出现，其中最多显示10个（一次一个）？

亲切的问候， 丹尼斯

Answer 1

这是一种方法。我使用jQuery＆＃39; onclick来绑定.on()链接点击或AddMorePicturesBox值更改时，而不是使用pictureInputBox的函数。您需要将class="pictureInputBox"添加到现有的input="file"。

$(function(){
    $('#AddMorePicturesBox').on('click', function(){
        if($('.pictureInputBox').length < 10){
            $(this).parent().parent().before('<tr><td></td><td><input type="file" name="pictureInputBox" class="pictureInputBox" /></td><td class="formhelp"></td></tr>');
        }
        else{
            alert('You can only have 10 files');
        }
    });
    $(document).on('change', '.pictureInputBox', function(){
        var fileCount = 0;
        $('.pictureInputBox').each(function(index,value){
            if($(this).val() != ''){
                fileCount++;
                $(this).parent()
                .next('.formhelp').html(fileCount+'/10 pictures');
            }
        });
    });
});

您可以在 - http://jsfiddle.net/8k3N3/

上查看示例

Answer 2

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

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);
    });
});

DEMO：http://jsfiddle.net/j3E7A/