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>

我的问题是：

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

提前加油，斯威夫特

Answer 1

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

我在一个单独的类中管理文件上传，该类还介绍了拖放。基本上，您必须在“ load”事件上返回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

Answer 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);
    }
});

这是根据有关重复的注释中的建议修订的jQuery代码。如果您将其发布为答案，我会接受的：）

作法：HTML / jQuery-档案上传（图片）预览名称+档案

2 个答案: