Question

我有一个文件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);
});

<!-- 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

您只需要在input事件处理程序中将val的{{1}}属性重置为空字符串即可。

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

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

Answer 2

在点击时重置输入值

$("#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);
});
$("#input").on("click", function(e) {
var value= $('#input').val();
  if(value){
    $('#input').val('');
  }
});

<!-- 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 -->

在模态中显示图像，即使它是相同的图像

2 个答案: