上传时无法通过 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的更多信息。工作演示：&nbsp;https ://jsfiddle.net/usmanmunir/w5cbgLsk/运行下面的代码片段以查看它的工作原理。$(function() {&nbsp; //Preview image function&nbsp; var previewImage = function(image) {&nbsp;&nbsp;&nbsp; &nbsp; if (image.files) {&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;//Check all images&nbsp; &nbsp; &nbsp; var filesAmount = image.files.length;&nbsp; &nbsp; &nbsp; for (i = 0; i < filesAmount; i++) {&nbsp; &nbsp; &nbsp; &nbsp; var reader = new FileReader();&nbsp; &nbsp; &nbsp; &nbsp; reader.onload = function(event) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //Replace images on form upload selected image&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#output').attr('src', event.target.result)&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; reader.readAsDataURL(image.files[i]);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; };&nbsp;&nbsp;&nbsp; //Select image and call imagePreview function&nbsp; $('#Image').on('change', function() {&nbsp; &nbsp; previewImage(this);&nbsp; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="form-group">&nbsp; <label for="Image">Image</label>&nbsp; <input type="file" id="Image" name="Image" accept="image/*">&nbsp; <div class="load_images">&nbsp; &nbsp; <img src="http://mandarinazul.co/images/mandarinas.png" id="output">&nbsp; </div></div>

Answer 2

&nbsp;<img src="../yourimage/path/image.jpeg" onclick="previmg()" id="displayimage" />&nbsp;<input type="file" class="form-control" onchange="selectedimg(this)" id="selectphoto" style="display: none" name="photo">&nbsp; &nbsp; &nbsp; </div>function previmg(){&nbsp;document.querySelector('#selectphoto').click();}function selectedimg(e){if(e.files[0]) {&nbsp;var reader = new FileReader();&nbsp;reader.onload = function(e) {&nbsp;document.querySelector('#displayimage').setAttribute('src', e.target.result);}&nbsp;reader.readAsDataURL(e.files[0]);}}或者你也可以试试这个，<input type="file" onchange="previewFile()"><br><img src="" height="200" alt="image has to be load">function previewFile() {&nbsp;const preview = document.querySelector('img');&nbsp;const file = document.querySelector('input[type=file]').files[0];&nbsp;const reader = new FileReader();&nbsp;reader.addEventListener("load", function () {&nbsp; preview.src = reader.result;&nbsp; }, false);&nbsp; if (file) {&nbsp; &nbsp;reader.readAsDataURL(file);&nbsp; &nbsp;}}试试这个，如果有任何疑问随时问，两者都会发挥魅力。:-)