Question

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

<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>

这是我的javascript

expect

Here is Screenshot

Answer 1

使用FileReader，请参阅How to show local picture in web page?

如果没有支持，可以先上传到服务器tmp目录，然后预览

$('#tmp_img').attr('src','tmp/tmp_hashnumber.jpg');

确保

后移动它

Answer 2

我认为你看起来像这样。这是我以前的解决方案的一部分。在这里，您会找到more complex implementation

＆＃13;

//Console logging (html)
if (!window.console)
  console = {};

var console_out = document.getElementById('console_out');

console.log = function(message) {
  console_out.innerHTML += message + '<br />';
  console_out.scrollTop = console_out.scrollHeight;
}

function previewFile() { 
  var preview = document.getElementById('source_image');
  var file   = document.querySelector('input[type=file]').files[0]; 
  var reader  = new FileReader();
  reader.addEventListener("load", function(e) {
    preview.src = e.target.result; 
    preview.onload = function() {
      console.log('Image Loaded');
    };
  }, false);

  if (file) {  
    reader.readAsDataURL(file);
  }
}

＆＃13;

<input type="file" onchange="previewFile()"><br>
<div>
  <h3>Original Image before Upload</h3>
  <img id="source_image" alt="Image preview..." />
</div>

<div>
  <fieldset>
    <legend>Console output</legend>
    <div id='console_out'></div>
  </fieldset>
</div>

＆＃13;

Answer 3

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

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

首先click位于<a>元素，如果下一个<div>不包含<img>追加<img>，则调用.toggle()以显示{{ 1}}。

在<img> click元素处，请拨打.close而不是.toggle()。

您还可以添加一个元素，例如.remove()，在点击后，会创建一个<button>实例，将所有或选定的FormData个对象设置为File的条目上传到服务器。

＆＃13;

multipart/form-data

＆＃13;

$(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;
}

＆＃13;

如何在上传前显示图片预览？

3 个答案: