选择同一文件时的 JQuery 更改事件问题

Question

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

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

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

Answer 1

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="test" type="file" />

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="test" type="file" />

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