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

Question

现在我有一个在加载时显示图像的 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>

Answer 1

您可以通过使用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>

Answer 2

 <img src="../yourimage/path/image.jpeg" onclick="previmg()" id="displayimage" />

 <input type="file" class="form-control" onchange="selectedimg(this)" id="selectphoto" style="display: none" name="photo">

      </div>

function previmg(){

 document.querySelector('#selectphoto').click();

}

function selectedimg(e){

if(e.files[0]) {

 var reader = new FileReader();

 reader.onload = function(e) {

 document.querySelector('#displayimage').setAttribute('src', e.target.result);

}

 reader.readAsDataURL(e.files[0]);

}}

或者你也可以试试这个，

<input type="file" onchange="previewFile()"><br>

<img src="" height="200" alt="image has to be load">

function previewFile() {

 const preview = document.querySelector('img');

 const file = document.querySelector('input[type=file]').files[0];

 const reader = new FileReader();

 reader.addEventListener("load", function () {

  preview.src = reader.result;

  }, false);

  if (file) {

   reader.readAsDataURL(file);

   }}

试试这个，如果有任何疑问随时问，两者都会发挥魅力。:-)