Attēla priekšskatījums pirms tā augšupielādes

Vēlos, lai pirms faila (attēla) augšupielādes varētu veikt tā priekšskatījumu. Priekšskatījuma darbība jāveic pārlūkprogrammā, neizmantojot Ajax, lai augšupielādētu attēlu.

Kā es to varu izdarīt?

Justin
Rediģēts jautājums 6priekšpusdienari1t septembrī 2011 в 10:49
Programmēšana
file-upload javascript jquery
16priekšpusdienari3t decembrī 2010 в 9:51
18 skati
Risinājums

Aplūkojiet tālāk sniegto koda paraugu:

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#imgInp").change(function() {
  readURL(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <input type='file' id="imgInp" />
  ![your image](#)

Varat arī [izmēģināt šo paraugu šeit](http://jsfiddle.net/LvsYc/).

dgknca
Rediģēta atbilde 7pēcpusdienari4t jūnijā 2019 в 10:57
Komentāri (13)

LeassTaTT atbilde darbojas arī "standarta" pārlūkprogrammās, piemēram, FF un Chrome. Risinājums IE pastāv, bet izskatās citādi. Šeit ir aprakstīts starp pārlūkprogrammām paredzētais risinājums:

HTML mums ir nepieciešami divi priekšskatījuma elementi: img standarta pārlūkprogrammām un div IE pārlūkprogrammām.

HTML:



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

CSS mēs norādām šādu IE specifisku lietu:

CSS:

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

HTML ir iekļauti standarta un IE specifiskie Javascripts:


<script type="text/javascript">
  {% include "pic_preview.js" %}
</script>
Balthazar
Rediģēta atbilde 14priekšpusdienari4t augustā 2015 в 11:30
Komentāri (0)

Kā izveidot funkciju, kas ielādē failu un izraisa pielāgotu notikumu. Pēc tam pievienojiet klausītāju ievades ievadam. Šādā veidā mums būs vairāk iespēju izmantot failu, ne tikai attēlu priekšskatīšanai.

/**
 * @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)

Iespējams, ka mans kods nav tik labs kā dažiem lietotājiem, bet es domāju, ka jūs sapratīsiet tā būtību. Šeit jūs varat redzēt [piemēru][1].

ajorquera
Rediģēta atbilde 21pēcpusdienari4t martā 2014 в 1:28
Komentāri (0)