Question

162

Multiple files upload and using file reader to preview

rated 0 times [ 164] [ 2] / answers: 1 / hits: 60428 / 10 Years ago, thu, may 1, 2014, 12:00:00

<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.

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

blair

Add To Favorites

Follow

Total Points: 384

Total Questions: 108

Total Answers: 86

Location: Northern Ireland

Member since Tue, May 5, 2020

4 Years ago

answered 10 Years ago lailab · Accepted Answer

Javascript Solution Fiddle DEMO

 <input id=files type=file multiple=multiple />

 <output id=result />

Pure 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 Solution

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

});