So zeigen Sie das ausgewählte Bild in der ImageField-Datei in der Vorlage an

Wie zeige ich das ausgewählte Dateibild in der Vorlage

Ein Fehler kommt mit dem 'image' Attribut hat keine Datei zugeordnet. Wie kann ich warten, bis der Benutzer eine Datei auswählt und dann das Bild in der Vorlage anzeigt.

Fehler

The 'image' attribute has no file associated with it. 

Vorlage

 {{ form.instance.image.url }} 

One Solution collect form web for “So zeigen Sie das ausgewählte Bild in der ImageField-Datei in der Vorlage an”

Du brauchst eine Lösung, was du tun willst.

JS:

 function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('.PreviewImg').attr('src',e.target.result);} reader.readAsDataURL(input.files[0]); } } $("#id_image").change(function(){ readURL(this); $('.PreviewImg').removeClass("testA") $('.PreviewImgDiv').removeClass("testA") }); $("#id_image_url").on("blur",function(e) { e.preventDefault(); var abc = $("#id_image_url")[0].value; $('.PreviewImg2').removeClass("testA") $('.PreviewImg2').attr('src', abc); $('.PreviewImgDiv').removeClass("testA") }); 

HTML

 <div class="PreviewImgDiv testA"> <div class="text-center"> <h4>Image Preview</h4> </div> <img class="PreviewImg testA" src="#"/> <img class="PreviewImg2 testA" src="#"/> 

CSS

 .testA{ display: none; } 

Wenn Sie also ein Bild <img class="PreviewImg testA" src="#"/> (klicken Sie auf Datei auswählen oder über Hyperlink hochladen), wird der <img class="PreviewImg testA" src="#"/> an <img class="PreviewImg testA" src="#"/> und auf der Website angezeigt. Die Div nur angezeigt (die CSS-Klasse wird entfernt), wenn Sie eine Datei hochladen. Deine id_image (vom PC) sollte die id id_image und das Feld haben, wo du über link id_image_url hochladen kannst. id_image_url that gets you going. Hinterlassen Sie einen Kommentar, wenn Sie Fragen haben.

  • Geo Django Mac OS X
  • AttributeError mit Django REST Framework und eine ManyToMany Beziehung
  • Craiglist E-Mail Anonymisierung für Python / Django
  • Django 1.7, dynamisches Admin-Formular
  • Django-Tests in PyCharm ausführen
  • Kopieren und Schreiben von EXIF-Informationen von einem Bild zum anderen mit pyexiv2
  • Syntaxfehler beim Analysieren von Json-Daten in Javascript
  • Benutzerdefiniertes Django-Feld, um eine Liste von E-Mail-Adressen zu speichern
  • Mod_wsgi Apache Fehler mit django app
  • Django-Sitzung funktioniert nicht in Firefox
  • Modellvererbung mit Djangos ORM
  • Python ist die beste Programmiersprache der Welt.