关于的onchange事件

__Christopher 2021-05-26 03:31:02

// 双击上传弹窗区域,向input[type=file]元素转发单击事件,弹出windows的打开文件窗口,选择图片
$(".vicp-drop-area").dblclick(function(e){
if($("#upload_file")){
$("#upload_file").click();
}
});
// 选中图片后打开 发生change事件,
$("#upload_file").on("change",function(e){
$(".step1").hide(); // 隐藏第一步选择图片的弹窗
$(".step2").show(); // 隐藏第二步图片上传预览弹窗

});

问题大概是这样,这是个上传图片的弹窗,
<input type="file">在step1类所在元素里
当点击这个元素区域,弹出系统的文件打开弹窗
接着就,点击确定和取消的结果反串了,而且是有规律的
这次点了确定,弹出step2
下次点了取消,弹出step2
网上搜不到类似的问题,请大神帮分析下onchange的时机,
目前只知道当值改变和失焦后会触发change,难道在系统选择图片后,再点击打开,
不满足这两个条件吗
...全文
721 5 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
__Christopher 2021-05-26
  • 打赏
  • 举报
回复
引用 1 楼 文盲老顾 的回复:
我一般不在页面上放 input type=file控件,我一般是放一个文本框,普通的type=text,当点击这个控件时,createElement(input),type=file,然后这个控件自行调用click(),当确定后,就是 onchange 时间,直接ajax上传,成功后将网址传值给当前点击的控件,取消的时候,就不调用任何事件 由于每次都是新createElement,所以不存在你说的问题
    $('.upfile').click(function () {
        var that = this;
        var file = $('<input type="file" accept=".zip,.rar,.doc,.xls,.docx,.xlsx,.pdf,.ppt" />');
        var el = file[0];
        file.on('change', function (e) {
            $('<div id="mask" style="position:fixed;top:0px;left:0px;width:100%;height:100%;background:#ccc;opacity:.4;filter:alpha(opacity=40);display:none;"></div>').appendTo($('body'));
            $('#mask').show();
            var files = $(this).get(0).files;
            var formData = new FormData();
            for (var i = 0; i < files.length; i++) {
                if (files[i].size > 20 * 1024 * 1024) {
                    alert('您选择的文件中有超出20M限制的文件,请重新选择并上传。');
                    return;
                }
                formData.append('fn' + i, files[i].name);
                formData.append('file' + i, files[i]);
            }
            $.ajax({
                url: 'https://xxxx.com.cn/upyun.aspx'
                , type: 'POST'
                , data: formData
                , cache: false
                , contentType: false
                , processData: false
                , success: function (data) {
                    var filepath = eval('(' + data + ')');
                    $(that).val(filepath[0]['url'])
                    $('#mask').remove();
                }
                , error: function (data) {
                    console.log(data)
                    alert('上传失败')
                    $('#mask').remove();
                }
            });
        });
        el.click();
    });
谢回答。代码清晰明了,可以作为我解决问题的方法之一。其实我是想弄明白里面的消息过程和机制
__Christopher 2021-05-26
  • 打赏
  • 举报
回复
我是这样的,其实这是csdn的头像上传模块,但是csdn用的是vue,我不会vue就用的jqurey,点击area区域来代替input

											<div class="vicp-step1">
												<div class="vicp-drop-area">
													<img src="" alt class="vicp-icon1">
													<span class="vicp-hint">双击此处选择图片</span>
													<span class="vicp-no-supported-hint" style="display:none;">浏览器不支持该功能,需要IE10以上!</span>
													<input type="file" id="upload_file" style="display:none;">
													
												</div>
												<div class="vicp-operate">
													<a>取消</a>
												</div>
											</div>
royler 2021-05-26
  • 打赏
  • 举报
回复
引用 2 楼 royler 的回复:
你可以换个思路解决这个问题,做一个隐藏的input,文本框,每次input file修改后,把值给文本框, 然后给input文本框做onchange事件,在文本框的change事件里面操作你要操作的
原因好像是因为input file无法判断值是否改变,内容值页无法修改,只在第一次会触发,
royler 2021-05-26
  • 打赏
  • 举报
回复
你可以换个思路解决这个问题,做一个隐藏的input,文本框,每次input file修改后,把值给文本框, 然后给input文本框做onchange事件,在文本框的change事件里面操作你要操作的
文盲老顾 2021-05-26
  • 打赏
  • 举报
回复
我一般不在页面上放 input type=file控件,我一般是放一个文本框,普通的type=text,当点击这个控件时,createElement(input),type=file,然后这个控件自行调用click(),当确定后,就是 onchange 时间,直接ajax上传,成功后将网址传值给当前点击的控件,取消的时候,就不调用任何事件 由于每次都是新createElement,所以不存在你说的问题
    $('.upfile').click(function () {
        var that = this;
        var file = $('<input type="file" accept=".zip,.rar,.doc,.xls,.docx,.xlsx,.pdf,.ppt" />');
        var el = file[0];
        file.on('change', function (e) {
            $('<div id="mask" style="position:fixed;top:0px;left:0px;width:100%;height:100%;background:#ccc;opacity:.4;filter:alpha(opacity=40);display:none;"></div>').appendTo($('body'));
            $('#mask').show();
            var files = $(this).get(0).files;
            var formData = new FormData();
            for (var i = 0; i < files.length; i++) {
                if (files[i].size > 20 * 1024 * 1024) {
                    alert('您选择的文件中有超出20M限制的文件,请重新选择并上传。');
                    return;
                }
                formData.append('fn' + i, files[i].name);
                formData.append('file' + i, files[i]);
            }
            $.ajax({
                url: 'https://xxxx.com.cn/upyun.aspx'
                , type: 'POST'
                , data: formData
                , cache: false
                , contentType: false
                , processData: false
                , success: function (data) {
                    var filepath = eval('(' + data + ')');
                    $(that).val(filepath[0]['url'])
                    $('#mask').remove();
                }
                , error: function (data) {
                    console.log(data)
                    alert('上传失败')
                    $('#mask').remove();
                }
            });
        });
        el.click();
    });

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧