第一次单击时不会在Microsoft Edge上触发更改事件
[英]change event is not fired on Microsoft Edge on first click
问题描述
I am trying to implement drag and drop and browse files. 
我正在尝试实现拖放和浏览文件。 I have a <div> with id #box and trying to trigger <input type="file" id="imageUpload" /> on click event of that <div> . 我有一个ID为#box的<div> ，并尝试在该<div> click事件上触发<input type="file" id="imageUpload" /> <div> 。 The following code is working fine on Mozilla Firefox and Google Chrome but having problem on Microsoft Edge . 以下代码在Mozilla Firefox和Google Chrome上运行正常，但在Microsoft Edge上存在问题。
$(document).off().on('click', '#box', function () { $('#imageUpload').trigger('click'); $('#imageUpload').off().on('change', function () { var imageLoader = document.getElementById('imageUpload'); selectedFiles = imageLoader.files; imageBrowseUploader(selectedFiles); }); });
#box { border: 1px dotted #0B85A1; width: 100%; height: 150px; color: #92AAB0; text-align: center; font-weight: 500; } #imageUpload { visibility: hidden; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="box"> <b>Drag and drop or click here</b> to upload your image. </div> <input type="file" id="imageUpload" />
3 个解决方案
解决方案1
1 2017-09-13 12:52:06
Here is the working Demo with minor changes! 这是工作中的演示，做了一些小的更改！ (As you can see) （如你看到的）
$(document).ready(function(){ $(document).on('click', '#box', function () { //debugger; $('#imageUpload').trigger('click'); }); $(document).on('change', function () { debugger; var imageLoader = document.getElementById('imageUpload'); selectedFiles = imageLoader.files[0].name; imageBrowseUploader(selectedFiles); }); }); function imageBrowseUploader(selectedFiles) { alert(selectedFiles); }
#box { border: 1px dotted #0B85A1; width: 100%; height: 150px; color: #92AAB0; text-align: center; font-weight: 500; } #imageUpload { visibility: hidden; }
<html> <head> <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> </head> <body> <div id="box"> <b>Drag and drop or click here</b> to upload your image. </div> <input type="file" id="imageUpload" /> </body> </html>
Hope this will works for you! 希望这对您有用！ thank you :) 谢谢 ：）
解决方案2
0 已采纳 2017-09-13 12:14:27
I would put the on change outside the click function, like this: 我将在click函数之外进行更改，如下所示：
$(document).ready(function(){ $(document).off().on('click', '#box', function () { $('#imageUpload').trigger('click'); }); $('#imageUpload').off().on('change', function () { var imageLoader = document.getElementById('imageUpload'); selectedFiles = imageLoader.files; imageBrowseUploader(selectedFiles); }); });
#box { border: 1px dotted #0B85A1; width: 100%; height: 150px; color: #92AAB0; text-align: center; font-weight: 500; } #imageUpload { visibility: hidden; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="box"> <b>Drag and drop or click here</b> to upload your image. </div> <input type="file" id="imageUpload" />
解决方案3
0 2017-09-13 12:16:03
$(document).off().on('click', '#box', function () { $('#imageUpload').trigger('click'); $('#imageUpload').off().on('change', function () { var imageLoader = document.getElementById('imageUpload'); selectedFiles = imageLoader.files; imageBrowseUploader(selectedFiles); }); });
#box { border: 1px dotted #0B85A1; width: 100%; height: 150px; color: #92AAB0; text-align: center; font-weight: 500; } #imageUpload { visibility: hidden; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="box"> <b>Drag and drop or click here</b> to upload your image. </div> <input type="file" id="imageUpload" />
Your above function contains event inside event.Please don't do that and initialize your change function inside document.ready function() 您上面的函数包含在event内部的事件，请不要这样做并在document.ready function（）中初始化您的更改函数
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.