87,997
社区成员
发帖
与我相关
我的任务
分享关于的onchange事件
// 双击上传弹窗区域，向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，难道在系统选择图片后，再点击打开，
不满足这两个条件吗
...全文
请发表友善的回复…
发表回复
__Christopher 2021-05-26
- 打赏
- 举报
谢回答。代码清晰明了，可以作为我解决问题的方法之一。其实我是想弄明白里面的消息过程和机制
__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
- 打赏
- 举报
原因好像是因为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();
});
