用js上传前预览图片

Question

我正在构建一个 BlogApp，但遇到了一个问题。

我想要做什么：-

我正在尝试preview image before upload。我正在使用裁剪功能来裁剪图像，但我也想在上传之前预览裁剪的图像。

模板.html

#这是我的密码

const crop = () => {
  var $image = $("#image");
  var cropData = $image.cropper("getData");
  $("#id_x").val(cropData["x"]);
  $("#id_y").val(cropData["y"]);
  $("#id_height").val(cropData["height"]);
  $("#id_width").val(cropData["width"]);
}

$(function() {

  /* SCRIPT TO OPEN THE MODAL WITH THE PREVIEW */
  $("#id_file").change(function() {
    if (this.files && this.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) {
        $("#image").attr("src", e.target.result);
        $("#modalCrop").modal("show");
      }
      reader.readAsDataURL(this.files[0]);
    }
  });

  /* SCRIPTS TO HANDLE THE CROPPER BOX */
  var $image = $("#image");
  var cropBoxData;
  var canvasData;
  $("#modalCrop").on("shown.bs.modal", function() {
    $image.cropper({
      viewMode: 1,
      aspectRatio: 1 / 1,
      minCropBoxWidth: 200,
      minCropBoxHeight: 200,
      ready: function() {
        $image.cropper("setCanvasData", canvasData);
        $image.cropper("setCropBoxData", cropBoxData);
      }
    });
  }).on("hidden.bs.modal", function() {
    cropBoxData = $image.cropper("getCropBoxData");
    canvasData = $image.cropper("getCanvasData");
    $image.cropper("destroy");
  });

  $(".js-zoom-in").click(function() {
    $image.cropper("zoom", 0.1);
  });

  $(".js-zoom-out").click(function() {
    $image.cropper("zoom", -0.1);
  });


  /* SCRIPT TO COLLECT THE DATA AND POST TO THE SERVER */
  $(".js-crop-and-upload").click(function() {
    crop()
    $("#formUpload").submit();
  });
  $(".js-crop-only").click(function() {
    crop()
    $("#modalCrop").modal("hide");
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/4.1.0/cropper.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/4.1.0/cropper.css">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">


<div class="container">
  <!-- FORM TO UPLOAD THE IMAGES -->
  <form method="post" enctype="multipart/form-data" id="formUpload">
    Image: <input type="file" id="id_file" />
    <div id="uploadedFile"></div>
    <input type="hidden" id="id_x" />
    <input type="hidden" id="id_y" />
    <input type="hidden" id="id_height" />
    <input type="hidden" id="id_width" />
    <br>

    <button type="submit" class="button button4">Save Changes</button>



  </form>
</div>

<!-- MODAL TO CROP THE IMAGE -->
<div class="modal fade" id="modalCrop">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Crop the photo</h4>
      </div>
      <div class="modal-body">
        <img src="" id="image" style="max-width: 100%;">
      </div>
      <div class="modal-footer">
        <div class="btn-group pull-left" role="group">
          <button type="button" class="btn btn-default js-zoom-in">
            <span class="glyphicon glyphicon-zoom-in"></span>
          </button>
          <button type="button" class="btn btn-default js-zoom-out">
            <span class="glyphicon glyphicon-zoom-out"></span>
          </button>
        </div>
        <button type="button" class="btn btn-default" data-dismiss="modal">Go Back</button>

        <button type="button" class="btn btn-primary js-crop-and-upload">Crop and upload</button>
        <button type="button" class="btn btn-primary js-crop-only">Select this image</button>



      </div>
    </div>
  </div>
</div>

模型实例名称：- 文件

我尝试了什么：-

• 我看到了很多答案并找到了很多答案，但它们对我不起作用。

• 我也试过这个：-

document.getElementById("files").onchange = function () {
    var reader = new FileReader();

    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("image").src = e.target.result;
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

<input type="file" id="files" />
<img id="image" />

但它对我不起作用，因为我想显示裁剪后的图像，当我把这段代码放在我的浏览器中时，它会显示两个file upload 选项，一个用于preview，一个用于Crop and Upload . 并且我想在一个文件上传选项中上传之前显示cropped image。

我尝试了很多代码，但没有任何对我有用。我不知道它有什么问题。

任何帮助将不胜感激。

Answer 1

你应该先创建Image对象，例如：

      function createPreviewImage(file) {
          imgElm = document.getElementById("ImgDiv")
          var image = new Image();
          image.src = "";
          var reader = new FileReader();
          reader.onload = (e) => {
              imgElm = e.target.result;
          };
          reader.readAsDataURL(file);
       }

Answer 2

URL.createObjectURL可以帮你生成预览

const changehandler=function(e){
  let url=URL.createObjectURL( e.target.files[0] )
  let div=e.target.parentNode.querySelector('div');
  let img=document.createElement('img');
    img.src=url;
    img.className='preview';

  div.appendChild( img )
};

document.querySelector('input[type="file"]').addEventListener('change', changehandler );

<form method="post" enctype="multipart/form-data" id="formUpload">
  Image: <input type="file" id="id_file" />

  <div id="uploadedFile"></div>
  <input type="hidden" id="id_x" />
  <input type="hidden" id="id_y" />
  <input type="hidden" id="id_height" />
  <input type="hidden" id="id_width" />
  <br>

  <button type="submit" class="button button4">Save Changes</button>
</form>