时间戳

首页 > 解决方案 > 上传时无法通过 jQuery 显示图像

javascript - 上传时无法通过 jQuery 显示图像

问题描述

现在我有一个在加载时显示图像的 url。但是，可以选择通过表单输入替换此图像。我希望上传的图片在上传后立即显示，以便用户对其进行评估。

我正在尝试通过 jQuery 完成此操作，但我无法让它工作。

这是我的代码：

HTML：

<div class="form-group">
   <label for="Image">Image</label>
   <input type="file" id="Image" name="Image" accept="image/*">
   <img src="..\{{ workshop_info[4] }}" id="output">
</div>

查询：

<script>
  $(document).ready(function() {
    $("#Image").change(function(e){
    $("#output").attr("src", e.target.files[0]);
    });
  });
</script>

标签： javascripthtmljquery

解决方案

您可以通过使用FileReader功能来做到这一点。

我重新创建了您的示例，该示例在加载时显示图像

choose file一旦我通过单击并选择文件上传自己的图像。load_images使用我创建的图像 div选择后，将预览该文件。

选择文件后，我会将src现有图像替换为来自的新 srcreadAsDataURL

您可以在此处详细阅读有关 FileReader的更多信息。

工作演示： https ://jsfiddle.net/usmanmunir/w5cbgLsk/

运行下面的代码片段以查看它的工作原理。 

$(function() {

  //Preview image function
  var previewImage = function(image) {
  
    if (image.files) {
     
     //Check all images
      var filesAmount = image.files.length;

      for (i = 0; i < filesAmount; i++) {
        var reader = new FileReader();
        reader.onload = function(event) {
          //Replace images on form upload selected image
          $('#output').attr('src', event.target.result)
        }
        reader.readAsDataURL(image.files[i]);
      }
    }

  };
  
  //Select image and call imagePreview function
  $('#Image').on('change', function() {
    previewImage(this);
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label for="Image">Image</label>
  <input type="file" id="Image" name="Image" accept="image/*">
  <div class="load_images">
    <img src="http://mandarinazul.co/images/mandarinas.png" id="output">
  </div>
</div>

推荐阅读