zmiana wejścia pliku wymiany img src i zmiana koloru obrazu

Question

Zdarzenie onchange nie działa. Co mam zrobić, aby uzyskać wynik na tej samej stronie. Nie chcę przekierowywać do żadnej innej strony, aby przesłać obraz. Czy ten problem wynika z opencart? Nie wiem, czy prawidłowe jest pisanie w ten sposób na cpanelu. Używam opencart i cpanel. Czy jest jakiś inny sposób?

HTML

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

skrypt

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

Musisz wysłać this obiekt tylko zamiast this.value podczas wywoływania onchange

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

ponieważ używasz input zmienną jako this w swojej funkcji, jak w wierszu

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

Working DEMO

EDIT - Spróbuj użyć jQuery jak poniżej -

usuń zmiany z pola wejściowego:

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

Bind onchange wydarzenie na polu wejściowym:

$(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

Spróbuj z tym kodem, można uzyskać podgląd obrazu podczas przesyłania

<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

w HTML : <input type="file" id="yourFile"> nie zapomnij, aby odwoływać się do pliku js lub umieścić następujący skrypt między <script></script> w skrypcie:

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);