2016-06-23 12 views
1

Ich versuche, das folgende jquery Beispiel in meiner django basierten Website auszuführen. Ich bin immer noch in der Lernphase, also bitte ertragen Sie mit mir. DieseDjango: Beispielbild jquery funktioniert nicht - Uncaught Reference Error

ist, was Teil meines Codes sieht wie bisher

{% extends "base.html" %} 
{% load crispy_forms_tags %} 
    {% block content %} 


    <input type='file' /> 
    <img id="myImg" src="#" alt="your ...image" /> 

<script> 
$(function() { 
    $(":file").change(function() { 
     if (this.files && this.files[0]) { 
      var reader = new FileReader(); 
      reader.onload = imageIsLoaded; 
      reader.readAsDataURL(this.files[0]); 
     } 
    }); 
}); 


function imageIsLoaded(e) { 
    alert("dsdsdsd") 
    $('#myImg').attr('src', e.target.result); 
}; 
</script> 



{% endblock %} 

Es scheint, als wenn ich eine Datei die $(":file").change Funktion wählen wird nicht aufgerufen. Irgendwelche Ideen, warum das nicht genannt werden sollte. Ich habe das auf jsfiddle versucht und es funktioniert. Ich bin auf Chrom. Dies ist, was die Chrom-Debug-Ausgabe

enter image description here

Auf Staubsaugen über das x zeigt heißt es

Uncaught Reference Error $ ist nicht definiert.

Meine jquery ist geladen. Das ist, was Chrom sagt enter image description here

Update:

so funktioniert es wie dieses

<script> 
     function startup() 
     { 

       $(function() { 
        $(":file").change(function() { 
         if (this.files && this.files[0]) { 
          var reader = new FileReader(); 
          reader.onload = imageIsLoaded; 
          reader.readAsDataURL(this.files[0]); 
         } 
        }); 
       }); 

       function imageIsLoaded(e) { 
        $('#myImg').attr('src', e.target.result); 

       }; 

     } 
     </script> 


<body onload="startup()"> 

Ich bin nicht sicher, warum es so funktioniert. Jede Erklärung wäre willkommen. Warum braucht es in den startup

+0

'$ ("input [type = 'file']") gelöst. Change' ?? –

+2

Das bedeutet, dass Ihre 'jQuery' höchstwahrscheinlich nicht geladen wird, wenn das Skript gelesen/ausgeführt wird. Stellen Sie sicher, dass Ihre 'jQuery'-Bibliothek zuerst eingelesen wird. – Adjit

+1

Ich legte es in den '

Verwandte Themen