Question

我使用jQuery的更改事件来捕获从我的计算机中选择的图像。

$("#user_photo").change(function () {
  alert('yes');
});

但我的问题是，当我再次选择相同的文件时，此功能不起作用。是的，它不会。但我想要一个解决方案。你能救我吗？

Answer 1

此行为在所有浏览器上都不相同。例如，使用firefox上的以下代码段，即使您选择了相同的文件，您也会收到警报。

＆＃13;

$('#test').on('change', function() {
  alert('yes');  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="test" type="file" />

＆＃13;

但你可能会很棘手。您可以使用输入文件，在上载文件时，将其带到服务器上，销毁输入文件并重新创建新的输入文件。但是如果你想这样做，你必须决定如何在你的服务器上传文件，因为不是每个浏览器都有javascript FileAPI。这是一个例子：

＆＃13;

$(document.body).on('change', '#test', function() {
  // Upload the file on your servlet, i can't really do the code for that. You case use the FileAPI or a library for that. Just take care of browsers compatibility : http://caniuse.com/#feat=fileapi
  
  // When the file is uploaded
  alert('yes');
  
  // Replace the input by a new one
  $(this).replaceWith('<input id="test" type="file">');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="test" type="file" />

＆＃13;

当然，您可以通过显示上传的文件来改进此代码。

Answer 2

使用事件，像这样

$("#user_photo").on("change", function () {
  alert('yes');
});

或者如果动态添加元素，可以使用以下

$("body").on("change", "#user_photo", function () {
   alert('yes');
});

当相同文件选择时，JQuery更改事件问题

2 个答案: