javascript - 在模态内显示图像，即使它是相同的图像

Question

我有一个文件 input 允许我上传图像，选择图像后，模态打开，模态内的图像。

这是一个Fiddle Example :

代码如下:

$("#input").on("change", function(e) {
  var _URL = window.URL || window.webkitURL,
      file = this.files[0],                   
      image = new Image();
  $('#image').attr('src',  _URL.createObjectURL(file));
  $(image).ready(function($) {
  	$('#modal').modal('show');
  });
  window.URL.revokeObjectURL(image.src);
});

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.bundle.min.js"></script>

<!-- Input to upload images -->
<input type="file" id="input" name="image">

<!-- Modal to show uploaded image on -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalLabel">Image Upload</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div> <!-- .modal-header -->
      <div class="modal-body">
        <div class="container">
          <!-- Uploaded Image -->
          <img id="image" src="" alt="Picture">
        </div> <!-- .container -->
      </div> <!-- .modal-body -->
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div> <!-- .modal-footer -->
    </div> <!-- .modal-content -->
  </div> <!-- .modal-dialog -->
</div> <!-- .modal -->

但是如果我关闭模式并尝试上传相同的图像，它不会打开，因为我正在使用 change。

我尝试使用click:

$("#input").on("click", function(e) {});

但是我收到这些错误并且未显示模态:

Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

然后我会检查图像尺寸和大小。

那么如何让它工作，如果我再次选择相同的图像，它将被打开？

Answer 1

您只需在您的change 事件处理程序中将您的input 的val 属性重置为一个空字符串。

您的麻烦在于，当输入的 val 属性未更改时，输入的 change 事件不会被调用。从表面上看很明显，但您可能混淆了 img 和 input 元素。您不仅需要调用 revokeObjectURL 来释放浏览器内存，您还需要重置您的 input 的值。否则，如果您打开同一个文件，您的 input 元素中没有任何变化，因此它的 change 事件不会被调用。撤销 img 元素中的 URL 与 input 元素无关。

$("#input").on("change", function(e) {
  var _URL = window.URL || window.webkitURL,
      file = this.files[0],                   
      image = new Image();
  $('#image').attr('src',  _URL.createObjectURL(file));
  $(image).ready(function($) {
  	$('#modal').modal('show');
  });
  window.URL.revokeObjectURL(image.src);
  $(e.target.id).val(''); // <- ADD THIS
});

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.bundle.min.js"></script>

<!-- Input to upload images -->
<input type="file" id="input" name="image">

<!-- Modal to show uploaded image on -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalLabel">Image Upload</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div> <!-- .modal-header -->
      <div class="modal-body">
        <div class="container">
          <!-- Uploaded Image -->
          <img id="image" src="" alt="Picture">
        </div> <!-- .container -->
      </div> <!-- .modal-body -->
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div> <!-- .modal-footer -->
    </div> <!-- .modal-content -->
  </div> <!-- .modal-dialog -->
</div> <!-- .modal -->