onchange cambia l'input del file img src e cambia il colore dell'immagine

Question

l'evento onchange non funziona. Cosa dovrei fare per ottenere risultati sulla stessa pagina. Non voglio reindirizzare a qualsiasi altra pagina per caricare l'immagine. Questo problema è dovuto all'openart? Non so se è corretto scrivere così in cpanel. Sto usando opencart e cpanel. C'è un altro modo?

HTML

<input type='file' id="upload" onchange="readURL(this.value)" /> 
    <img id="img" src="#" alt="your image" /> 

sceneggiatura

function readURL(input) { 
var url = input.value; 
var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase(); 
if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) { 
    var reader = new FileReader(); 

    reader.onload = function (e) { 
     $('#img').attr('src', e.target.result); 
    } 
    reader.readAsDataURL(input.files[0]); 
} 
else{ 
    $('#img').attr('src', '/assets/no_preview.png'); 
    } 
} 

JSFiddle

Answer 1

È necessario inviare this oggetto solo che invece di this.value durante la chiamata onchange

<input type='file' id="upload" onchange="readURL(this)" /> 

perché si sta utilizzando input variabile come this nella funzione, come a linea

var url = input.value;// reading value property of input element 

Working DEMO

EDIT - Prova utilizzando jQuery come qui di seguito -

rimuovere onchange dal campo di immissione:

<input type='file' id="upload" > 

Bind onchange evento da campo di inserimento:

$(function(){ 
    $('#upload').change(function(){ 
    var input = this; 
    var url = $(this).val(); 
    var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase(); 
    if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) 
    { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#img').attr('src', e.target.result); 
     } 
     reader.readAsDataURL(input.files[0]); 
    } 
    else 
    { 
     $('#img').attr('src', '/assets/no_preview.png'); 
    } 
    }); 

}); 

jQuery Demo

Answer 2

prova con questo codice, si otterrà l'immagine di anteprima durante il caricamento

<input type='file' id="upload" onChange="readURL(this);"/> 
<img id="img" src="#" alt="your image" /> 

function readURL(input){ 
var ext = input.files[0]['name'].substring(input.files[0]['name'].lastIndexOf('.') + 1).toLowerCase(); 
if (input.files && input.files[0] && (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) 
    var reader = new FileReader(); 
    reader.onload = function (e) { 
     $('#img').attr('src', e.target.result); 
    } 

    reader.readAsDataURL(input.files[0]); 
}else{ 
    $('#img').attr('src', '/assets/no_preview.png'); 
} 
} 

Answer 3

nel codice HTML : <input type="file" id="yourFile"> non dimenticare di fare riferimento il file js o mettere il seguente script tra <script></script> nello script:

var fileToRead = document.getElementById("yourFile"); 

fileToRead.addEventListener("change", function(event) { 
    var files = fileToRead.files; 
    var len = files.length; 
    // we should read just one file 
    if (len) { 
     console.log("Filename: " + files[0].name); 
     console.log("Type: " + files[0].type); 
     console.log("Size: " + files[0].size + " bytes"); 
    } 

}, false);