目录
头像上传的前端处理
头像上传的后端处理
ajax打包form里面的数据
1. 头像上传的前端处理
-
需求: 效果图在最下面
打开注册页面时, 显示默认头像 , 点击头像进行文件选择 ,选择完成将默认头像改为选择的头像
-
代码:
html部分: 将label的for值设为input的id , 并将img控件放入label中, 这样实现了点击头像就可以选择文件了, 因为file的input框太丑了
<div class="form-group"> <label for="my_file">头像 <img src="/static/img/default.png" id="img_file" alt="" width="80" height="80" style="margin-left: 10px"> </label> <input type="file" id="my_file"> </div>
css部分将这个input框display改成none
js部分, 要让选完图片以后img改成你选择的图片
// 对input框的值进行监听
$("#my_file").change(function () {
//先取出文件(图片)
var file_obj = $("#my_file")[0].files[0];
//通过文件阅读器,把图片放到img标签上
//生成一个文件阅读器对象
var filereader = new FileReader()
//把图片对象,读到filereader对象中
filereader.readAsDataURL(file_obj)
//filereader.result 这是filereader对象的值
//把文件对象渲染到img标签上(这样不行.需要加载完成才能操作)
//$("#img_file").attr('src', filereader.result)
//等加载完成,再操作
filereader.onload=function () {
$("#img_file").attr('src', filereader.result)
}
})
2. 头像上传的后端处理
-
视图函数里取头像参考
存到数据库的方法与其他东西一样
取出上传的文件对象
my_file=request.FILES.get('my_file')
存入数据库
models.UserInfo.objects.create_user(avatar=my_file)
-
注意
因为我在建数据库时设置了头像的默认值, 所以从request里面取出来的文件对象需要对其进行判断, 若存在则存, 不存在就用默认的
-
数据库里面的头像字段
avatar = models.FileField(upload_to='avatar/', default='/static/img/default.png') 第一个参数是文件存放的路径,没有会新建的 第二个参数是默认头像的路径 -
存在数据库里的并不是文件的二进制, 而是文件的路径, 取的时候取到对应的路径再去加载
原因 : 如果图片都存到数据库, 因为图片是比较大的, 数据库压力会很大
有了models.FileField字段,存文件,以及往数据库放文件路径,统统不需要自己做了
只需要把文件对象赋给它就可以了
3. ajax打包form里面的数据
-
需求:
当数据很多时, 有好多好多input框, 再一个一个的去拼数据很麻烦, 而且如果与文件的话, 还要一个一个去append, 更麻烦
-
用法
给form取个id , 用jq找到这个控件后点.serializeArray()把form表单打包,转成对象(列表套字典)
如
[ {name:'name',value:'wzj'},{name:'password',value:'123'}...]//因为要上传文件,生成formdata对象 var formdata=new FormData() var arr=$("#form").serializeArray() //jquery 的循环,传参数:第一个参数是要循环的对象,第二个参数是一个匿名函数 $.each(arr,function (key,obj) { //key为索引,obj为每次循环的元素 //obj对应的是:{name: "name", value: "sfdae"} formdata.append(obj.name,obj.value) }) //把文件放到formdata中 formdata.append('my_file',$('#my_file')[0].files[0]) $.ajax({ url:'/register/', type:'post', processData:false, contentType:false, data:formdata, success:function (data) { console.log(data) } })后台接收到的还与以前一样, 通过request.POST与request.FILES接收
.
.
.
.
选择头像以前
.
.
选择头像以后,
