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

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

这是我的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('
'+ '' +files[i].name+ '' +'
削除

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

这是截图

Answer 1

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

将html调整为

作为附加父元素而不是元素。

首先click 元素，如果next

不包含 append else调用.toggle()以显示 。

click .close元素，调用.toggle()而不是.remove() 。

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

 $(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('

' + '' + files[i].name + '' + '
削除

'); $("#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( $("", { src: URL.createObjectURL(files[i]) }) ) else close.siblings("img").toggle() }) })(i); } document.getElementById('filename').value = filename; } 

Answer 2

使用FileReader，请参阅如何在网页中显示本地图片？

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

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

确认后移动它

Answer 3

我觉得你看起来像这样。 这是我以前的解决方案的一部分。 在这里，您将找到更复杂的实现

 //Console logging (html) if (!window.console) console = {}; var console_out = document.getElementById('console_out'); console.log = function(message) { console_out.innerHTML += message + '
'; 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); } } 

 
 
 
Original Image before Upload
  
 
 
 
Console output