上传前如何显示图片预览? [英] How to show image preview before Upload?

问题描述

我想在上传过程之前显示图像预览.在我的情况下，我选择了多个带有输入文件的图像，文件名列表将显示为链接.当我单击图像文件名链接时，预览图像弹出窗口将显示其特定图像.这是我的代码.

I want to show image preview before uploading process. In my case I selected multiple images with input file and the list of file name will show as link. When I click on the image file name link then the preview image popup will show of it's specific image. Here is my code..

<input id="uploadBtn" type="file" class="upload" multiple="multiple" name="browsefile" style="display: none !important;"/>

<input type="button" value="ファイル追加" onclick="document.getElementById('uploadBtn').click();" style="float: right;"/>

<input id="filename" type="hidden" />
<br>
<div id="upload_prev"></div>
<div style="clear:both;"></div>

这是我的JavaScript

Here is my javascript

<script type="text/javascript">
  $(document).on('click','.close',function(){
    $(this).parents('span').remove();
  })

  document.getElementById("uploadBtn").onchange = function () {
     document.getElementById("uploadFile").value = this.value;
  };

  document.getElementById('uploadBtn').onchange = uploadOnChange;

  function uploadOnChange() {
    var filename = this.value;
    var lastIndex = filename.lastIndexOf("\\");
    if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
  }
var files = $('#uploadBtn')[0].files;
for (var i = 0; i < files.length; i++) {
  $("#upload_prev").append('<span><br><div class="col-md-10"><span class="uploadFiles">'+ '<a href="">' +files[i].name+ '</a>' +'</span></div><div class="col-md-2"><p class="close" style="font-size: 13pt;">削除</p><br></div></span>');
}
document.getElementById('filename').value = filename;
}
</script>

这是屏幕截图

推荐答案

您可以使用URL.createObjectURL()创建上传图像的Blob URL.

You can use URL.createObjectURL() to create a Blob URL of uploaded image.

将html调整为<div>作为附加的父元素，而不是<span>元素.

Adjusted html to <div> as appended parent element instead of <span> element.

在<a>元素的第一个click处，如果下一个<div>不包含<img>，则附加<img>，否则调用.toggle()以显示<img>.

At first click at <a> element, if next <div> does not contain <img> append <img> else call .toggle() to display <img>.

在.close元素的click处，调用.toggle()而不是.remove().

At click at .close element, call .toggle() instead of .remove().

您还可以包含一个元素，例如<button>，单击该元素会创建一个FormData实例，以将所有或选定的File对象设置为要上传到服务器的multipart/form-data条目.

You can also include an element, for example, <button>, which when clicked, creates a FormData instance to set all or selected File objects as entries of multipart/form-data to upload to server.

$(document).on('click', '.close', function() {
  $(this).siblings("img").toggle();
})

document.getElementById("uploadBtn").onchange = function() {
  document.getElementById("uploadFile").value = this.value;
};

document.getElementById('uploadBtn').onchange = uploadOnChange;

function uploadOnChange() {
  var filename = this.value;
  var lastIndex = filename.lastIndexOf("\\");
  if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
  }
  var files = $('#uploadBtn')[0].files;
  for (var i = 0; i < files.length; i++) {
    (function(i) {
      $("#upload_prev").append('<div><br><div class="col-md-10"><span class="uploadFiles">' + '<a href="">' + files[i].name + '</a>' + '</span></div><div class="col-md-2"><p class="close" style="font-size: 13pt;">削除</p><br></div></div>');
      $("#upload_prev a:contains(" + files[i].name + ")")
        .on("click", function(e) {
          e.preventDefault();
          var close = $(this).closest("div")
            .next("div")
            .find(".close");
          if (!$(this).closest("div")
            .next("div").find("img").length) 
            close
            .after(
              $("<img>", {
                src: URL.createObjectURL(files[i])
              })
            )
          else
            close.siblings("img").toggle()
        })
    })(i);
  }

  document.getElementById('filename').value = filename;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="uploadBtn" type="file" class="upload" multiple="multiple" accept="image/*" name="browsefile" style="display: none !important;" />

<input type="button" value="ファイル追加" onclick="document.getElementById('uploadBtn').click();" style="float: right;" />

<input id="filename" type="hidden" />
<br>
<div id="upload_prev"></div>
<div style="clear:both;"></div>

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