JavaScript-Funktion nicht in HTML-Seite arbeiten

Question

HTML-Code für Durchsuchungsdatei Schaltfläche

<input type="file" multiple="false" accept="image/*" id="filein" onclick="filo()"> 

JavaScript

function filo(){ 
    var canin= document.getElementByID("c5"); 
    var imgin = document.getElementById("filein"); 
    var xct = canin.getContext("2d"); 
    var img = new Image(filein); 
    xct.drawImage(canin); 
} 

Answer 1

Es gibt mehrere Probleme.

• Sie müssen den onchange Ereignis nicht das click Ereignis

  <input type="file" multiple="false" accept="image/*" id="filein">

  Sie das Skript mit Ereignis-Listener hinzufügen verwenden, anstatt in der Schlange.

  <script> // this script must be place after the element filein or use an onload event. filein.onchange = filo(); </script>

• Die Funktion getElementById keinen String ein Element zurückgibt. Sie müssen den Dateinamen (URL) aus der files Eigenschaft des Elements

• abrufen. Ändern Sie die Bildkonstruktion, da die Bild-URL nicht als Argument verwendet wird. Sie legen die img.src auf die URL und warten dann, bis das Bild geladen wird.

• Die Funktion drawImage Funktion erfordert das Bild und mindestens 2 Argumente, die die Stelle sind, an der gezeichnet werden soll.

Beispiel für Änderungen.

function filo() { 
    // Get the filename of the input element 
    var imgin = document.getElementById("filein").files[0]; // <<Get the file URL 

    // Typo its getElementById not getElementByID 
    var canin= document.getElementById("c5"); 
    var xct = canin.getContext("2d"); 

    // Image does not take a URL via the constructor 
    var img = new Image(); 

    // set the URK here 
    var img.src = imgin; 

    // you need to wait for the image to load then you can draw it 
    img.onload = function() { 

     // drawImage function requires the image and at least 2 arguments 
     // that are the location to draw at  
     xct.drawImage(this, 0, 0); // this is the image in the onload event 
    } 
}