Téléchargement de plusieurs fichiers et utilisation du lecteur de fichiers pour prévisualiser

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


            }
        }
    }

J'ai une fonction à l'aide de lecteur de fichier pour afficher l'aperçu de l'image, Il fonctionne très bien dans un seul fichier.

Cependant je cherche à atteindre plusieurs fichiers.

Ma question est de savoir comment obtenir les fichiers d'entrée de tableau, en boucle des fichiers via le lecteur de fichier et l'ajout img

source d'informationauteur Ben | 2014-05-01

javascript jquery

En utilisant un Seul Fichier Télécharger jQuery

le Fichier jQuery Entrée Aperçu de l'Image Avant qu'Elle Est Téléchargée

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

Fichier API - FileReader Pur JavaScript Violon DÉMO

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

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

Travail De Violon

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

Plus de détails sur Les fichiers de l'API et de référence de l'aide pour cette réponse...

À l'aide de votre code Travail De Violon

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

Muliple prévisualisation du Fichier à l'aide de Jquery et 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>

Vous devez vous connecter pour publier un commentaire.