在jQuery中上传之前如何预览图像 [英] How to preview image before uploading in jquery

问题描述

我可以使用javascript fileReader读取上载的图像，但是如何在jquery中读取上载的图像，以便可以在上载之前预览图像?

I can read the uploaded image by using javascript fileReader but how can i read the uploaded image in jquery so that i can preview the image before uploading ?

推荐答案

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      $('#previewHolder').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#filePhoto").change(function() {
  readURL(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="file" name="filePhoto" value="" id="filePhoto" class="required borrowerImageFile" data-errormsg="PhotoUploadErrorMsg">
<img id="previewHolder" alt="Uploaded Image Preview Holder" width="250px" height="250px"/>

这篇关于在jQuery中上传之前如何预览图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！