jQuery Multiple images preview in browser

Html

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

Javascript

$(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {
        if (input.files) {
            var filesAmount = input.files.length;
            for (i = 0; i < 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