如何：HTML / jQuery - 文件上传（图像）预览名称+文件答案

【问题标题】：How to: HTML / jQuery - File upload (images) preview name + file如何：HTML / jQuery - 文件上传（图像）预览名称+文件
【发布时间】：2018-12-25 10:01:40
【问题描述】：

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

我正在尝试编写一些 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>

我的问题是：

是否有（如果有）更好的方法来完成这项任务？

提前干杯，斯威夫特

【问题讨论】：

对我来说似乎很好。您对解决方案有什么特别不喜欢的地方吗？我可以看到（超）大图像是一个问题，但我怀疑它是否重要。
而不是$(this.files).each(...) 使用files.each(..)，这是不必要的重复。
而不是files.each(function(i) { readFile(files[i], ...); });，只需使用files.each(function(i, file) { readFile(file, ...); });。
@חייםפרידמן 非常感谢您指出这一点，我正在寻找的正是这种反馈。我绝不是专家，但重复从来都不是一件好事:)
@Halcyon 虽然我意识到大文件可能会导致问题，但我已经指定了一个小的 CSS sn-p，我将在此处发布 .preview-thumbs {display: block; padding: 10px 0px; width: 250px;} 这意味着它会根据图像高度自动缩放在宽度参数上。（至少我认为它是这样工作的，哈哈！）

标签： javascript jquery html css

【解决方案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

【讨论】：

您好，第一行的const 是什么意思？
const 是在 ES6 (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…) 中引入的。它保证变量是不可变的。您可以使用 let 或 var 获得相同的结果。我使用const 使我的代码更“纯粹”。这是很主观的，但是如果，我必须使用let，那就意味着代码可以改进。
简要阅读了您链接的那个页面，我明白为什么人们会想要这种类型的变量，一个不能改变的变量，至少不需要花大力气。

【解决方案2】：

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

这是根据 cmets 中关于重复的建议修改的 jQuery 代码。如果您将其发布为答案，我会接受它:)

【讨论】：