Skapa bildförhandsgranskning med ren JavaScript

Den här handledningen visar hur du lägger till förhandsgranskning av bilder med ren JavaScript. Bildförhandsgranskning innebär att du kan granska bilder innan de laddas upp till en server.

Med denna plugin kan du förhandsgranska flera bilder eller bara en bild för varje filuppladdningskontroll. Vi använder en FileReader för att läsa in varje fil och bilden är Base64-kodad i attributet src.

Det här tillägget har testats och fungerar med Google Chrome (75.0.3770.100), Mozilla Firefox (67.0.4), Microsoft Edge (42.17134.1.0) och Internet Explorer (11.829.17134.0), detta utan någon polyfill. Om du vill stödja äldre webbläsare kan du läsa vårt inlägg om hur man transpilerar och kompletterar JavaScript.

JavaScript

Denna klass har en konstruktor, den här klassen skall endast användas när någon skapar en ny instans av den. Konstruktorn tar alternativ som en parameter och vi lägger till förändringshändelselyssnare för varje filuppladdningskontroll som ska ha förhandsgranskning av bilder.

var annytab = annytab || {};
annytab.imagepreview = (function () {

    'use_strict';

    // Constructor
    function imagepreview(opts)
    {
        // Set default values for parameters
        opts = opts || {};

        // Set options
        this.options = { image_class: 'annytab-imagepreview', alt: 'Preview' };
        for (var option in this.options) {
            if (opts.hasOwnProperty(option) === true)
            {
                this.options[option] = opts[option];
            }
        }

        // Get all file input controls that should have a preview
        var inputs = document.querySelectorAll('[data-imagepreview-container]');

        // Add events
        addEvents(this, inputs);

    } // End of the constructor

    // Add events
    function addEvents(ip, inputs)
    {
        // Loop inputs
        for (var i = 0; i < inputs.length; i++)
        {
            // Add a change event
            window.onload = inputs[i].addEventListener('change', function (event)
            {
                // Prevent default behaviour
                event.preventDefault();

                // Get a image preview container
                var preview_container = document.getElementById(this.getAttribute('data-imagepreview-container'));

                // Clear the container (fastest way)
                while (preview_container.firstChild) {
                    preview_container.removeChild(preview_container.firstChild);
                }

                // Loop files
                for (var i = 0; i < this.files.length; i++)
                {
                    // Create a file reader
                    var reader = new FileReader();

                    // Load the image
                    reader.onload = function (e)
                    {
                        // Insert image (fastest way)
                        preview_container.insertAdjacentHTML('beforeend', '<img src="' + e.target.result + '" class="' + ip.options.image_class + '" alt="' + ip.options.alt + '" />');
                    };

                    // Read the image
                    reader.readAsDataURL(this.files[i]);
                }

            }, false);
        }

    } // End of the addEvents method

    // Return this object
    return imagepreview;

})();

Så här använder du tillägget

Du måste lägga till ett data-imagepreview-container attribut för varje filuppladdningskontroll som ska ha bildförhandsgranskning. Du måste också lägga till en behållare som kan användas för att visa bilder.

<input name="background_image" type="file" class="annytab-form-control" data-imagepreview-container="img0" multiple />
<div id="img0" style="margin:10px 0px 0px 2px;">
    @if (string.IsNullOrEmpty(imageUrls.Get("background_image")) == true)
    {
        <i class="fas fa-image fa-6x fa-fw"></i>
    }
    else
    {
        <img src="@this.tools.GetFilePath(imageUrls.Get("background_image"))" alt="@background_image_tt" style="max-width:100%;border:1px solid #cccccc;" />
    }
</div>

Skapa en ny instans av tillägget inuti en skript-tagg och lägg till alternativ för klass och alt-text. Standardvärden kommer att användas om inga alternativ läggs till.

<!--<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>-->
<script src="/js/annytab-shared/annytab.imagepreview.js"></script>
<script>

    var image_preview = new annytab.imagepreview({ image_class: 'annytab-imagepreview', alt: 'ALT' });

</script>

.annytab-imagepreview {
    display: block;
    max-width: 100%;
    border: 1px solid #cccccc;
    margin-bottom: 5px;
}