duanbinmi8970 2014-07-29 18:18
浏览 27
已采纳

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

I have a form where I check the character limit a user can put in a textfield and the 'onkeyup' attribute updates this in realtime Example of how it looks like

Now I want to do the same thing for image uploading where as soon as a user selects an Image from his computer that I want to update the counter (note: select not yet send the form). image showing what i want to do: Default look

As can be seen in this picture, I want the 0/10 to become 1/10 here since an image (to be uploaded later) has been selected: enter image description here

If someone is kind enough to help me, I would like to use this occasion to ask a side question regarding the same issue: The code I use looks as follows:

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

How can I make another "pictureInputBox" appear when clicking on the link with setting a maximum of 10 of these to appear (one at a time)?

Kind regards, Dennis

  • 写回答

2条回答 默认 最新

  • duanjing2013 2014-07-29 19:15
    关注

    I believe the following answers both of your questions:

    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/

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名