[pyar] Django y Upload imagen

[Juan Carlos Abdala]

Aqui esta el post:

https://medium.com/@toniabdala/upload-imagen-con-preview-para-django-1c8728c71b6#.tjdmvdcqk

Todas las correcciones son bienvenidas y creo que Medium es horrible para
postear codigo.

Saludos

El 19 de abril de 2016, 18:27, Marco Moresi<mrc.moresi en gmail.com> escribió:

> Que bueno que lo hayas solucionado! Quedo a la espera del post, para ver
> como lo hiciste! Saludos
> On Apr 19, 2016 16:19, "Juan Carlos Abdala" <tonisgo en gmail.com> wrote:
>
>> Gente ya lo solucione gracias a Alessandro. en Breve el comparto un post
>> explicando como.
>>
>> Saludos y Muchas Gracas
>>
>> El 19 de abril de 2016, 15:41, Juan Carlos Abdala<tonisgo en gmail.com>
>> escribió:
>>
>>> Ya te agregue.
>>>
>>> Saludos
>>>
>>> El 19 de abril de 2016, 15:22, Alessandro Odetti<aodetti en gmail.com>
>>> escribió:
>>>
>>>> Hola Juan,
>>>> agregame a hangouts si queres y te tiro unos tips.
>>>>
>>>> Saldos.
>>>>
>>>> El 19 de abril de 2016, 15:20, Juan Carlos Abdala <tonisgo en gmail.com>
>>>> escribió:
>>>>
>>>>> 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
>>>>>
>>>>>
>>>>> _______________________________________________
>>>>> pyar mailing list pyar en python.org.ar
>>>>> http://listas.python.org.ar/listinfo/pyar
>>>>>
>>>>> PyAr - Python Argentina - Sitio web: http://www.python.org.ar/
>>>>>
>>>>> La lista de PyAr esta Hosteada en USLA - Usuarios de Software Libre de
>>>>> Argentina - http://www.usla.org.ar
>>>>>
>>>>
>>>>
>>>>
>>>> --
>>>> *- Alessandro Odetti -*
>>>>
>>>> _______________________________________________
>>>> pyar mailing list pyar en python.org.ar
>>>> http://listas.python.org.ar/listinfo/pyar
>>>>
>>>> PyAr - Python Argentina - Sitio web: http://www.python.org.ar/
>>>>
>>>> La lista de PyAr esta Hosteada en USLA - Usuarios de Software Libre de
>>>> Argentina - http://www.usla.org.ar
>>>>
>>>
>>>
>>>
>>> --
>>> Att. Juan Carlos Abdala
>>>
>>>
>>
>>
>> --
>> Att. Juan Carlos Abdala
>>
>>
>> _______________________________________________
>> pyar mailing list pyar en python.org.ar
>> http://listas.python.org.ar/listinfo/pyar
>>
>> PyAr - Python Argentina - Sitio web: http://www.python.org.ar/
>>
>> La lista de PyAr esta Hosteada en USLA - Usuarios de Software Libre de
>> Argentina - http://www.usla.org.ar
>>
>
> _______________________________________________
> pyar mailing list pyar en python.org.ar
> http://listas.python.org.ar/listinfo/pyar
>
> PyAr - Python Argentina - Sitio web: http://www.python.org.ar/
>
> La lista de PyAr esta Hosteada en USLA - Usuarios de Software Libre de
> Argentina - http://www.usla.org.ar
>



-- 
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/53606e4b/attachment-0001.html>