使用form组件上传头像

实现的效果如下:

将默认的上传文件框隐藏起来变成了一个默认的头像

而且可以点击上传

处理步骤

avatar = forms.FileField(
widget = widgets.FileInput(attrs={"class": "form-control","style":"display:none"}),
label='头像',
error_messages={
'required':'需要上传'
} )

给file  ipput绑定onchange事件,然后取到文件对象,通过阅读器阅读,文件上传时候要利用FormData()对象来上传

 $(':file').change(function () {
var file_obj = $(this)[0].files[0];
var file_Read = new FileReader();
file_Read.readAsDataURL(file_obj);
file_Read.onload=function (){
$("#avatar_img").attr('src',this.result)
}
}); $("form button").click(function () {
var username = $("id_username").val();
var form_datas = new FormData();
$.each($('input'), function (i, k) {
form_datas.append($(this).attr('name'), $(this).val())
});
form_datas.append('avatar', $("[type='file']")[0].files[0]);
//form_datas.append($('form').serialize());
$.ajax({
url: '',
type: 'post',
data: form_datas,
contentType: false,
processData: false,
success: function (data) {
if (data.is_success) {
location.href = '/login/'
}
else {
var $inputs = $('input');
$inputs.parent().next().text('');
var d1 = data.message;
$inputs.each(function () {
if ($(this).attr('name') in d1) {
var temp = d1[$(this).attr('name')][0];
$(this).parent().next().text(temp)
}
}) }
}
})
});

生成头像预览

后台取数据

  f_obj = request.FILES.get('avatar')
Userinfo.objects.create_user(**form_obj.cleaned_data,avatar=f_obj)

django头像上传详解的更多相关文章

  1. Multipart/form-data POST文件上传详解

    Multipart/form-data POST文件上传详解 理论 简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form ...

  2. [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

    人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...

  3. Multipart/form-data POST文件上传详解(转)

    Multipart/form-data POST文件上传详解 理论 简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form ...

  4. Newtonsoft.Json C# Json序列化和反序列化工具的使用、类型方法大全 C# 算法题系列(二) 各位相加、整数反转、回文数、罗马数字转整数 C# 算法题系列(一) 两数之和、无重复字符的最长子串 DateTime Tips c#发送邮件,可发送多个附件 MVC图片上传详解

    Newtonsoft.Json C# Json序列化和反序列化工具的使用.类型方法大全   Newtonsoft.Json Newtonsoft.Json 是.Net平台操作Json的工具,他的介绍就 ...

  5. MVC图片上传详解 IIS (安装SSL证书后) 实现 HTTP 自动跳转到 HTTPS C#中Enum用法小结 表达式目录树 “村长”教你测试用例 引用provinces.js的三级联动

    MVC图片上传详解   MVC图片上传--控制器方法 新建一个控制器命名为File,定义一个Img方法 [HttpPost]public ActionResult Img(HttpPostedFile ...

  6. ASP.Net MVC3 图片上传详解(form.js,bootstrap)

    图片上传的插件很多,但很多时候还是不能切合我们的需求,我这里给大家分享个我用一个form,file实现上传四张图片的小demo.完全是用jquery前后交互,没有用插件. 最终效果图如下: 玩过花田人 ...

  7. 【转】JSch - Java实现的SFTP(文件上传详解篇)

    JSch是Java Secure Channel的缩写.JSch是一个SSH2的纯Java实现.它允许你连接到一个SSH服务器,并且可以使用端口转发,X11转发,文件传输等,当然你也可以集成它的功能到 ...

  8. JSch - Java实现的SFTP(文件上传详解篇)

    JSch是Java Secure Channel的缩写.JSch是一个SSH2的纯Java实现.它允许你连接到一个SSH服务器,并且可以使用端口转发,X11转发,文件传输等,当然你也可以集成它的功能到 ...

  9. JSch - Java实现的SFTP(文件上传详解篇) [转载]

    文章来源:http://www.cnblogs.com/longyg/archive/2012/06/25/2556576.html JSch是Java Secure Channel的缩写.JSch是 ...

随机推荐

  1. Appium安装过程

    Appium安装过程 先安装了 Node.js.在node的官网上下载的exe安装文件. 在node的command line中执行 npm install -g appium 来安装appium,报 ...

  2. 基于canvas的仪表盘效果

    概述 基于Canvas实现的仪表盘及效果.通过配置参数,可以任意修改仪表盘颜色,刻度,动画过渡时间等,满足不同场景下的使用.同时使用原生的Canvas,也是学习Canvas的很好的例子. 详细 代码下 ...

  3. 王立平--svnserver搭建

    1.下载 2.安装打开. 3.新建存储库. ---------------------------------- 4.新建用户. watermark/2/text/aHR0cDovL2Jsb2cuY3 ...

  4. 转载【linux】Linux学习之CentOS6.x+7.x---网卡的配置

    转载至:http://www.cnblogs.com/smyhvae/p/3932903.html [正文] Linux系统版本:Centos 6.5 Linux系统版本:Centos 7 目的:将c ...

  5. 加速nginx: 开启gzip

    nginx 是一个高性能的 Web 服务器,之前也写过一些关于 nginx 的文章.为了提高博客的响应速度,可以从设置 nginx 的 gzip 和缓存这2方面入手.为字体开启 gzip 和缓存能大大 ...

  6. 微信公众平台消息接口PHP版

    使用前提条件:拥有一个公网上的HTTP服务器主机空间,具有创建目录.上传文件等权限.推荐新浪的SAE.http://sae.sina.com.cn/ 首先请注册微信公众平台的账号,注册地址:http: ...

  7. Linux-yum在线安装svn步骤

    yum -y install subversion httpd mod_dav_svn 使用yum命令安装svn(subversion),httpd(apache服务器)和svn在apache上的插件 ...

  8. 解决Sping 框架 Controller@Value获取不到值

    原因:要获取 int.properties 中的数据 但是 一直拿不到值 如下代码 使用这种方式注入 *.properties文件 <!-- 引入配置文件 --> <context: ...

  9. Android中TextView内容过长加省略号

          textview中有个内容过长加省略号的属性,即ellipsize,用法如下: 在xml中 Android:ellipsize = "end"   省略号在结尾 and ...

  10. 用Visual studio2012在Windows8上开发内核驱动监视线程创建

    在Windows NT中,80386保护模式的“保护”比Windows 95中更坚固,这个“镀金的笼子”更加结实,更加难以打破.在Windows 95中,至少应用程序I/O操作是不受限制的,而在Win ...