时间戳

首页 > 解决方案 > 如何：HTML / jQuery - 文件上传（图像）预览名称+文件

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

问题描述

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

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

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

幸运的是我偶然发现了这篇文章，HTML5 FileReader 如何返回结果？并设法调整代码，使其呈现图片而不是 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>

我的问题是：

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

提前干杯，斯威夫特

标签： javascriptjqueryhtmlcss

解决方案

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

我在一个单独的类中管理文件上传，该类也涵盖拖放。基本上，您必须在“加载”事件上返回 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

推荐阅读