[pyar] Django y Upload imagen

[Juan Carlos Abdala]

Gente estoy con lo siguiente, estoy trabajando con un form que es de alta
de un usuario y necesito subir una foto.
La cuestión es que quiero agregar al form vista previa que no tiene con
widgets de django, así que lo hice con js y html.

Agrego por el formato no necesita que tenga un ajax para mandar las cosas.

En conclusión no se como integrar dentro del html con su respetivo js que
la imagen la devuelva en el submit del form.


Model:

class Teacher(models.Model):

              headline = models.CharField(max_length=200)
              photo = models.ImageField(null=True, blank=True)


 Luego lo agrego a un model form y creo una intancia que envio en la view
que se llama teachform.

Y lo envió tengo algo así en el tempalte.


 <form class="m-t" role="form" action="/newteacher/" method="post">
            <h3>Completa los Datos de Perfil</h3>

               {% csrf_token %}

                <div class="col-md-6" align="center">
                <p>Imagen de Perfil.</p>
                    <div class="img-preview img-preview-sm">
                        <img id="blah" src="/static/img/a2.jpg" alt="your
image" width="100" height="100" />
                    </div>
                 <div class="btn-group">
                    <label title="Upload image file" for="imgInp"
class="btn btn-primary">
                       <input type='file' id="imgInp" class="hide" />
                    Upload new image
                    </label>
                </div>

                 <div class="form-group">
                 <p>Una Frase de cabecera.</p>
                     {{ teachform.headline}}
                </div>
              <button type="submit" class="btn btn-primary block full-width
m-b">Cargar Perfil</button>
                {%if usrform.errors%}
                    <div class="alert text-center">
                      <p>{{teachform.errors}}</p>
                    </div>
                {%endif%}
  </div>
 </form>

Esto tiene una funcion en Js

<script>
$(document).ready(function() {

    function readURL(input) {

        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                $('#blah').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#imgInp").change(function() {
        readURL(this);
    });
});
</script>


Espero que allá logrado explicarme. Desde ya gracias por leerlo.

Saludos




-- 
Att. Juan Carlos Abdala
------------ próxima parte ------------
Se ha borrado un adjunto en formato HTML...
URL: <http://listas.python.org.ar/pipermail/pyar/attachments/20160419/dcbffc61/attachment.html>