jQuery Multiple images preview in browser

Html

<input id="filies" class="form-control" style="width: 100%;" accept="image/*" multiple="multiple" name="files" type="file" placeholder="Attachment, Log, IncCapture" /></pre><div class="gallery"> </div><pre>

Javascript

$(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {
        if (input.files) {
            var filesAmount = input.files.length;
            for (i = 0; i &lt; filesAmount; i++) {
                var reader = new FileReader();
                reader.onload = function(event) {
                    $($.parseHTML('<img style="padding-right: 5px; margin-top: 5px;" />')).attr('src', event.target.result).appendTo(placeToInsertImagePreview).width(120).height(120);
                }
                reader.readAsDataURL(input.files[i]);
            }
        }
    };

    $('#filies').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });
});

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องที่ต้องการถูกทำเครื่องหมาย *

Share
Tweet
Pin
+1
Share
0 Shares