多个文件上传并使用文件阅读器进行预览

Question

<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

Answer 1

Javascript解决方案 小提琴演示

 <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文件输入图像预览之前上传

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

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

有关此答案的文件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 + "'>");
            }
        });
    }
}