html - 如何在上传前单击另一个选项卡中上传的图像以查看其完整大小？

Question

是否可以打开我将在另一个选项卡中上传的图像，以便在保存之前查看其完整尺寸？

我试着在上面加上一个href，但它不起作用，就像这样。

<a href="" target="_blank"><img src="" width="100" height="100"></a>

有没有办法用我的代码做到这一点？请参阅下面的代码以获取示例。

任何帮助将不胜感激，我真的被困在这一部分。

$(document).ready(function() {
  $("#photo").change(function(event) {
    let file = this.files[0];
    let mime = file.type;
    
    let $player;
    
    if (/^image/.test(mime)) { // audio
      $player = $('<img src="" width="100" height="100">');
    } else {
      console.log('Invalid file selected...');
      return;
    }
    
    $('#preview').empty().append($player);
    $player[0].src = URL.createObjectURL(file);
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="form-group">
  <div class="form-body">
    <div class="form-group">
      <label class="control-label col-md-3" id="label-photo">Upload</label>
      <div class="col-md-9">
        <input id="photo" name="photo" required="required" type="file" class="form-control upload_valid">
        <span id="upload_warning" class="help-block"></span>
      </div>
    </div>
  </div>

  <div class="form-group" id="preview"></div>
</div>

标签： htmljquery