Προεπισκόπηση μιας εικόνας πριν από τη μεταφόρτωσή της

Θέλω να μπορώ να κάνω προεπισκόπηση ενός αρχείου (εικόνας) πριν από τη μεταφόρτωσή του. Η ενέργεια προεπισκόπησης θα πρέπει να εκτελεστεί ολόκληρη στο πρόγραμμα περιήγησης χωρίς να χρησιμοποιηθεί Ajax για τη μεταφόρτωση της εικόνας.

Πώς μπορώ να το κάνω αυτό;

Justin
Επεξεργασμένη ερώτηση Κάνε Σεπτέμβριος 2011 в 10:49
Προγραμματισμός
file-upload javascript jquery
Κάνε Δεκέμβριος 2010 в 9:51
18 προβολές
Λύση

Ρίξτε μια ματιά στον παρακάτω κώδικα δείγματος:

dgknca
Επεξεργασμένη απάντηση Κάνε Ιούνιος 2019 в 10:57
Σχόλια (13)

Η απάντηση του LeassTaTT λειτουργεί καλά σε "τυπικά" προγράμματα περιήγησης όπως το FF και το Chrome. Η λύση για τον IE υπάρχει, αλλά φαίνεται διαφορετική. Εδώ περιγραφή της λύσης cross-browser:

Στην HTML χρειαζόμαστε δύο στοιχεία προεπισκόπησης, img για τους τυπικούς φυλλομετρητές και div για τον IE.

HTML:



<div id="preview_ie"></div>

Στο CSS καθορίζουμε το ακόλουθο πράγμα που αφορά τον IE:

CSS:

#preview_ie {
  FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
}

Στην HTML περιλαμβάνουμε τα τυπικά και τα ειδικά για τον IE Javascripts:


<script type="text/javascript">
  {% include "pic_preview.js" %}
</script>
Balthazar
Επεξεργασμένη απάντηση Κάνε Αύγουστος 2015 в 11:30
Σχόλια (0)

Τι θα λέγατε για τη δημιουργία μιας συνάρτησης που φορτώνει το αρχείο και ενεργοποιεί ένα προσαρμοσμένο συμβάν. Στη συνέχεια, προσαρτήστε έναν ακροατή στην είσοδο. Με αυτόν τον τρόπο έχουμε μεγαλύτερη ευελιξία στη χρήση του αρχείου, όχι μόνο για την προεπισκόπηση εικόνων.

/**
 * @param {domElement} input - The input element
 * @param {string} typeData - The type of data to be return in the event object. 
 */
function loadFileFromInput(input,typeData) {
    var reader,
        fileLoadedEvent,
        files = input.files;

    if (files && files[0]) {
        reader = new FileReader();

        reader.onload = function (e) {
            fileLoadedEvent = new CustomEvent('fileLoaded',{
                detail:{
                    data:reader.result,
                    file:files[0]  
                },
                bubbles:true,
                cancelable:true
            });
            input.dispatchEvent(fileLoadedEvent);
        }
        switch(typeData) {
            case 'arraybuffer':
                reader.readAsArrayBuffer(files[0]);
                break;
            case 'dataurl':
                reader.readAsDataURL(files[0]);
                break;
            case 'binarystring':
                reader.readAsBinaryString(files[0]);
                break;
            case 'text':
                reader.readAsText(files[0]);
                break;
        }
    }
}
function fileHandler (e) {
    var data = e.detail.data,
        fileInfo = e.detail.file;

    img.src = data;
}
var input = document.getElementById('inputId'),
    img = document.getElementById('imgId');

input.onchange = function (e) {
    loadFileFromInput(e.target,'dataurl');
};

input.addEventListener('fileLoaded',fileHandler)

Πιθανόν ο κώδικάς μου να μην είναι τόσο καλός όσο μερικοί χρήστες, αλλά νομίζω ότι θα καταλάβετε το νόημα. Εδώ μπορείτε να δείτε ένα [παράδειγμα][1]

ajorquera
Επεξεργασμένη απάντηση Κάνε Μάρτιος 2014 в 1:28
Σχόλια (0)