双11狂欢大促

盲盒赢 定制羽绒服

开启惊喜盲盒，抽取你的专属好礼

— 惊喜奖品抢先看 —

超级年卡50元券

周边70元券

手机支架

一拖三数据线

雨伞

运动毛巾

电动牙刷

VIP月卡

机械键盘

定制羽绒服

超级年卡50元券

周边70元券

手机支架

一拖三数据线

雨伞

运动毛巾

电动牙刷

VIP月卡

机械键盘

定制羽绒服

关于的onchange事件

2021-05-26 03:31:02 827 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

__Christopher 墨衍会员 · AI 创作全网分发关注 + 加入社区

别再怕ADRC调参了！手把手教你用MATLAB/Simulink搞定TD、ESO、NLSEF（附完整参数表）本文详细解析了ADRC（自抗扰控制）的调参方法，通过MATLAB/Simulink实战演示，帮助工程师快速掌握TD、ESO和NLSEF模块的参数整定技巧。文章提供了完整的参数表和调参指南，解决ADRC调参难题，提升控制系统的鲁棒性和性能。阅读详情



                // 双击上传弹窗区域，向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，难道在系统选择图片后，再点击打开，
不满足这两个条件吗

...全文

【PADS-开发指南】馒头破戒大师阅读详情

__Christopher

JavaScript 87,983 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

__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

打赏
举报

    $('.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();
    });

✦双11狂欢大促✦

关于的onchange事件

相关推荐

双11狂欢大促