Question

我正在尝试实施拖放和浏览文件。我有<div>，其ID为#box，并尝试在<input type="file" id="imageUpload" />的点击事件上触发<div>。以下代码在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" />

Answer 1

这是一个有微小变化的工作演示！（如你所见）

$(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>

希望这对你有用！谢谢你:)）

Answer 2

我会在点击功能之外进行更改，如下所示：

＆＃13;

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

＆＃13;

#box {
    border: 1px dotted #0B85A1;
    width: 100%;
    height: 150px;
    color: #92AAB0;
    text-align: center;
    font-weight: 500;
}

#imageUpload {
    visibility: hidden;
}

＆＃13;

<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" />

＆＃13;

Answer 3

$(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" />

您的上述函数包含事件内部事件。请不要这样做并在document.ready function（）

中初始化您的更改函数

首次单击时不会在Microsoft Edge上触发更改事件

3 个答案: