多个文件上传并使用文件阅读器进行预览 [英] Multiple files upload and using file reader to preview

问题描述

<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 +"'>");


            }
        }
    }

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

I have a function using file reader to preview image, It works fine in single file.

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

However I try to achieve multiple files.

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

My question is how to get input files array, loop files through file reader and append img

推荐答案

Javascript解决方案

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

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

这篇关于多个文件上传并使用文件阅读器进行预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！