javascript - 如何: HTML/jQuery - File upload (images) preview name + file

Question

我非常欢迎对完成这项任务的不同方法提出建设性的批评和建议。

我正在尝试编写一些 jQuery，允许用户在当前窗口中预览一个或多个文件，而无需重新加载 DOM。

要实现这一点，我知道的最简单的方法是 .append() <div id="gallery"> 中的图像元素.我发现自己很难让文件名与正确的图片一起显示，主要问题是图片没有按特定顺序呈现(可能首先呈现最小的文件)。

幸运的是我偶然发现了这篇文章，HTML5 FileReader how to return result?并设法调整代码，使其呈现图片而不是 base64 编码。

$(function(){
		$('#file_input').change(function(e){
    		var files = $(this.files)
    		$(this.files).each(function(i){
        	readFile(files[i], function(e) {
            	var imageSrc = e.target.result
            	$('#output_field').append('<h4>'+files[i].name+'</h4><img class="preview-thumbs" id="gallery-img" src="' + imageSrc + '">');
            })
        });
    });
		function readFile(file, callback){
    	var reader = new FileReader();
    	reader.onload = callback
    	reader.readAsDataURL(file);
		}
});

.preview-thumbs {display: block; padding: 10px 0px; width: 250px;}
.thumb-containers {}
#gallery>.img-container {display: inline-block; border: 3px solid #243d51; padding: 5px; width: 350px; border-radius: 20px; text-align: center;}
h4 {color: red; font-size: 20px; font-weight: bold;}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<input type="file" id="file_input" class="foo" multiple/>
<div id="output_field" class="foo"></div>

我的问题是:

是否有(如果有的话)更好的方法来完成这项任务？

提前干杯， swift

Answer 1

我最近发布了一个解决完全相同问题的元素。

我在一个单独的类中管理文件上传，该类还包括拖放。基本上，您必须在“加载”事件上返回 target.result。

const fileReader = new FileReader();
fileReader.addEventListener("load", this.fileReader_load.bind(this, file.name), false);
fileReader.readAsDataURL(file);


fileReader_load(fileName, event) {
    event.target.removeEventListener("load", this.fileReader_load);
    this.onFileLoaded(fileName, event.target.result);
}  

在这里查看完整的图像加载器:https://github.com/PopovMP/image-holder/blob/master/public/js/file-dropper.js

图片预览很简单。创建一个图像元素并将其 src 设置为 imageData。

这是完整的源代码:https://github.com/PopovMP/image-holder