多个文件上传并使用文件阅读器预览答案

【问题标题】：Multiple files upload and using file reader to preview多个文件上传并使用文件阅读器预览
【发布时间】：2014-05-01 04:50:35
【问题描述】：

<input type='file' name="image"  onchange="preview(this);" multiple="multiple" />


window.preview = function (input){
        if(input.files && input.files[0]) {

            var reader = new FileReader();

            reader.readAsDataURL(input.files[0]);
            reader.onload = function(e){

                $("#previewImg").append("<img src='" + e.target.result +"'>");


            }
        }
    }

我有一个使用文件阅读器预览图像的功能，它在单个文件中工作正常。

但是我尝试实现多个文件。

我的问题是如何获取输入文件数组，通过文件阅读器循环文件并附加 img

【问题讨论】：

标签： javascript jquery

【解决方案1】：

Javascript 解决方案 Fiddle DEMO

 <input id="files" type="file" multiple="multiple" />
 <output id="result" />

纯 JavaScript：

function handleFileSelect(event) {
    //Check File API support
    if (window.File && window.FileList && window.FileReader) {

        var files = event.target.files; //FileList object
        var output = document.getElementById("result");

        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            //Only pics
            if (!file.type.match('image')) continue;

            var picReader = new FileReader();
            picReader.addEventListener("load", function (event) {
                var picFile = event.target;
                var div = document.createElement("div");
                div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" + "title='" + file.name + "'/>";
                output.insertBefore(div, null);
            });
            //Read the image
            picReader.readAsDataURL(file);
        }
    } else {
        console.log("Your browser does not support File API");
    }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

jQuery 解决方案

jQuery File Input Image Preview Before It Is Uploaded

<form id="form1" runat="server">
    <input type='file' id="inputFile" />
    <img id="image_upload_preview" src="http://placehold.it/100x100" alt="your image" />
</form>

jQuery：

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#image_upload_preview').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}

$("#inputFile").change(function () {
    readURL(this);
});

【讨论】：

file.name 在 title 属性中未定义，如何解决？

【解决方案2】：

Working Fiddle
Javascript

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

        // Only process image files.
        if (!f.type.match('image.*')) {
            continue;
        }

        var reader = new FileReader();

        // Closure to capture the file information.
        reader.onload = (function (theFile) {
            return function (e) {
                // Render thumbnail.
                var span = document.createElement('span');
                span.innerHTML = ['<img class="thumb" src="', e.target.result,
                    '" title="', escape(theFile.name), '"/>'].join('');
                document.getElementById('previewImg').insertBefore(span, null);
            };
        })(f);

        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
    }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

有关Files API 的更多详细信息以及此答案的参考帮助...

使用您的代码 Working Fiddle
HTML

<input type='file' name="image" onchange="preview(this);" multiple="multiple" />
<div id='previewImg'></div>

Javascript

window.preview = function (input) {
    if (input.files && input.files[0]) {
        $(input.files).each(function () {
            var reader = new FileReader();
            reader.readAsDataURL(this);
            reader.onload = function (e) {
                $("#previewImg").append("<img class='thumb' src='" + e.target.result + "'>");
            }
        });
    }
}

【讨论】：

【解决方案3】：

使用 Jquery 和 DataURL 预览多个文件

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<script language="Javascript">
$(function () {
    $("#browse").change(function () {
        if (typeof (FileReader) != "undefined") {
            var dvPreview = $("#preview");
            dvPreview.html("");
            var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
            $($(this)[0].files).each(function () {
                var file = $(this);
                if (regex.test(file[0].name.toLowerCase())) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var img = $("<img />");
                        img.attr("style", "height:100px;width: 100px");
                        img.attr("src", e.target.result);
                        dvPreview.append(img);
                    }
                    reader.readAsDataURL(file[0]);
                } else {
                    alert(file[0].name + " is not a valid image file.");
                    dvPreview.html("");
                    return false;
                }
            });
        } else {
            alert("This browser does not support HTML5 FileReader.");
        }
    });
});


</script>

</html>

【讨论】：