jQuery - .change() 选择图像后不触发
[英]jQuery - .change() not triggering after selecting image
问题描述
I am writing a piece of code that loads image and shows the image preview in an <img> tag, it works perfectly on chrome and Firefox but not on Microsoft Edge.
我正在编写一段加载图像并在<img>标签中显示图像预览的代码，它在 chrome 和 Firefox 上完美运行，但在 Microsoft Edge 上却没有。 I did a very intensive search but could not find any relevant solution, maybe someone had a similar issue that I did not find online.我进行了非常深入的搜索，但找不到任何相关的解决方案，也许有人遇到了我在网上找不到的类似问题。 Anyway, when I do console.log trying to debug the issue, found that the .change() did not work.无论如何，当我执行 console.log 尝试调试问题时，发现 .change() 不起作用。 (Note, It loads a small jpeg image about 20 KB, but it will not work if it is bigger than 25 KB, and need to try at least 2 times then it will load small image) Here are the files （注意，它加载了一个大约 20 KB 的小 jpeg 图片，但如果它大于 25 KB，它将无法工作，需要尝试至少 2 次才能加载小图片）这里是文件
$(document).ready(function(e) {
$('.img_upload img').bind("click" , function () {
var img=$(this);
var input=img.next(".send_photo_input");
input.trigger("click");
input.change(function(){
console.log("trigger the input");
var preview= $(".send_photo_img");
var file=document.querySelector('input[type=file]').files[0];
var reader=new FileReader();
reader.addEventListener("load",function(){
console.log("this is before preview");
preview.attr("src",reader.result);
console.log("after preview");
},false); //end of the listening
if(file)
{
console.log("inside if");
reader.readAsDataURL(file);
}
else
{
console.log("inside else");
}
});
});
});
The above file is ex1.js上面的文件是ex1.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="ex.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="ex1.js"></script>
</head>
<body>
<div class="img_upload">
<img class="send_photo_img" id="send_photo1_img" src="left.png"/>
<input id="send_photo1" name="send_photo1" class="send_photo_input"
type="file"/>
</div>
</body>
</html>
the ex.css is just with display:none to hide input element ex.css 只是使用 display:none 来隐藏输入元素
It does not on on Microsoft Edge.它不在 Microsoft Edge 上。 I have been debugging this issue, need some help to figure it out, thanks in advance.我一直在调试这个问题，需要一些帮助来解决它，提前致谢。
2 个解决方案
解决方案1
0 2018-10-28 05:43:46
Try to use on尝试使用on
input.on('change',function(){
//rest of the code
})
解决方案2
0 已采纳 2018-10-29 06:15:21
Try to put the change event outside the button click event.尝试将更改事件放在按钮单击事件之外。 Code as below:代码如下：
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function (e) {
$('.img_upload img').bind("click", function () {
var img = $(this);
var input = img.next(".send_photo_input");
input.trigger("click");
});
$(".send_photo_input").change(function () {
console.log("trigger the input");
var preview = $(".send_photo_img");
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
console.log("this is before preview");
preview.attr("src", reader.result);
console.log("after preview");
}, false); //end of the listening
if (file) {
console.log("inside if");
reader.readAsDataURL(file);
}
else {
console.log("inside else");
}
});
});
</script>
<style type="text/css">
#send_photo1{
display:none;
}
</style>
</head>
<body>
<div class="img_upload">
<img class="send_photo_img" id="send_photo1_img" src="../Images/Capture.PNG" />
<input id="send_photo1" name="send_photo1" class="send_photo_input"
type="file" />
</div>
</body>
The result as below:结果如下：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.