当前位置：文江博客话题详情

HTML 文件上传 fileupload

file input控件onchange事件只生效一次

发布于 2022-08-27 12:45:19 字数 103 浏览 16 评论 0

如何解決file input控件onchange事件只生效一次問題？
要求：
1. 不使用JQuery；
2. 不移除原來的file input控件。

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（4）

ゞ记忆︶ㄣ 2022-09-03 12:45:19

removeEventListener()和addEventListener() 具体用法查查就行了。响应一次后就调用removeEventListener()就能实现你说的

冷血 2022-09-03 12:45:19

能看下你怎么写的么

居里长安 2022-09-03 12:45:19

<!DOCTYPE html>
<html>
    <head>
        <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>    
        <style>
            .cropit-preview{
                background-color: #f8f8f8;
                background-size: cover;
                border: 1px solid #ccc;
                border-radius: 3px;
                margin-top: 7px;
                width: 28px;
                height: 28px;
            }
        </style>
    </head>
    <body>
        <div class="cropit-preview"></div>
        <input type="file" name="targetFile" id="targetFile" onchange="change(this)">    
        <script>
            function change(obj){ 
                console.log("change");
                /*解决上传相同文件onchange事件只触发一次的问题*/
                var nf = obj.cloneNode(true);
                nf.value=''; // 设计新控件value为空
                obj.parentNode.replaceChild(nf, obj);
                /**********************************************/
                
                $('.cropit-preview').empty();
                var file = obj.files[0];
                var img=$('<img/>');                            
                var reader=new FileReader();
                reader.onload=function(e){
                    img.attr('src', e.target.result);
                    img.attr('width', '28px');
                    img.attr('height', '28px');
                    $('.cropit-preview').append(img);
                }
                reader.readAsDataURL(file);
            }
        </script>
    </body>
</html>

找了好久，在csdn的一个帖子里找到了答案。

恋竹姑娘 2022-09-03 12:45:19

在onchange事件发生后把input.file的值置为空就行了。

~没有更多了~

关于作者

偏爱你一生

暂无简介

0 文章

0 评论

24 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文