python上传图像_python 之头像上传,预览

上传头像

我们需要实现的效果是:当我们点击默认头像,用户可以进行选择要上传的头像文件,其原理就是头像的img标签与文件input(file类型)框重合或者关联,可以通过如下两种方式进行实现:

方法一label关联

将img标签放在label标签中,通过label标签for与input标签的id关联,并将input标签隐藏,便可以实现我们需要的功能,代码如下:

头像  {#label与input id绑定在一起,可以实现效果#}

方法二:重合实现

若使二者能够重合,且点击时是进行上传文件操作,要求input放在上面,而不能被看见,不能设置隐藏,就需要对其透明度进行设置,总体的css设置如下:

53a1c1ba368805c73c8e0ddee0d00509.png

头像预览--> reader

预览图片(与服务器无关),当用户选中图片,将url赋给src

//头像预览

$("#avatar").change(function () {

var choose_file= $(this)[0].files[0]; //获取上传文件对象

var reader=new FileReader();//实例化一个阅读器对象

reader.readAsDataURL(choose_file);// 读url ---->将图片的url通过阅读器读出来结果在reader.result//绑定图片的标签//绑定事件是为了防止上面语句还未将图片读完

reader.οnlοad=function () {

$("#avatar_img").attr("src", this.result)

}

});

文件上传

form上传

ajax上传

jquery中的each循环

each循环主要有两种应用形式,一种是对查询到的标签对象循环,另一种就是对已知的序列数据进行循环,具体介绍实例如下:

f8ed9de6094e343c38962534c85c6370.png

4c2a4a316d2dace2d7513bc9641007b6.png

-----------------------------

74393c0c52281fc1d18382978a674280.png

4dce55b46607f3c0111c87c1ab9414be.png

---------------------

499f7464be7b7e5260b43caeec42952f.png

e22d33788ad776750aecd232ba48ac22.png

关于media配置(用户上传的信息)

可以使用static,但Django有提供这个功能

静态文件:static---->css、js、img、font(字体)

用户上传文件: media---->avatar、.....

只针对FileField,ImageField字段:(用户能直接访问到照片)

//默认会将FielField字段中的upload_to参数对应的值avatar文件下载到项目的根目录下

如果在setting里配置#media配置(放置用户上传的文件)

MEDIA_ROOT=os.path.join(BASE_DIR,"blog","media")// 将FileField字段中的upload_to参数对应的值avatar下载到MEDIA_ROOT指定的路径

使用media配置

settings.py

MEDIA_URL="/media/"urls.pyfrom blog importviews

url(r'^media/(?P.*)$', serve, {'document_root': settings.MEDIA_ROOT}),

63a53723916766b37404d28b5f21891b.png

//总结//针对FileField,Imagefield字段://使用的话,(在页面用户能访问到)

在url.py#给media配置的信息

from blog importviewsfrom django.views.static importservefrom cnblog importsettings

url(r'^media/(?P.*)$', serve, {'document_root': settings.MEDIA_ROOT}),//如果在settings配置了一句:

MEDIA_ROOT=os.path.join(BASE_DIR,"blog","media")

将FileField字段中的upload_to参数对应的值avatars下载MEDIA_ROOT路径下

avatar 只保存url


版权声明:本文为weixin_31199559原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。