django中博客后台将图片上传作为用户头像
添加上传目录
# 如果不添加上传目录，仍然可以上传成功，默认为project目录，如果models.py定义了upload_to="目录名称"，则会上传到"project/目录名称"这个目录，如果添加了如下配置，会上传到"project/media"目录或者project/media/upload_to="目录名称"/：
settings.py MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
后台注册页面
# ajax在提交图片到后台的时候，不能直接将图片作为字典传递，而是formData。
例：
var formData = new FormData;
formData.append("username", $("#id_username").val());
formData.append("password", $("#id_password").val());
formData.append("re_password", $("#id_re_password").val());
formData.append("email", $("#id_email").val());
// 这里传递的是文件对象，是为了能够定位文件,后台获取到这个文件对象后会通过models字段单中的upload_to="avator"参数传递到服务器目录。
formData.append("avatar", $("#id_avatar")[0].files[0]);
formData.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<body>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/backend.css"> <div class="container register">
<div class="row">
<div class="col-md-6 col-md-offset-3">
{# form添加novalidate参数，代表取消前端h5的验证，比如邮箱格式验证#}
<form novalidate action="/register/" method="post" class="form-horizontal" enctype="multipart/form-data">
{% csrf_token %}
<div class="form-group">
<label for="{{ form_obj.username.id_for_label }}" class="col-sm-2 control-label">
{{ form_obj.username.label }}
</label>
<div class="col-sm-8">
{{ form_obj.username }}
<span class="help-block">{{ form_obj.username.errors.0 }}</span>
</div>
</div> <div class="form-group">
<label for="{{ form_obj.password.id_for_label }}" class="col-sm-2 control-label">
{{ form_obj.password.label }}
</label>
<div class="col-sm-8">
{{ form_obj.password }}
<span class="help-block">{{ form_obj.password.errors.0 }}</span>
</div>
</div> <div class="form-group">
<label for="{{ form_obj.re_password.id_for_label }}" class="col-sm-2 control-label">
{{ form_obj.re_password.label }}
</label>
<div class="col-sm-8">
{{ form_obj.re_password }}
<span class="help-block">{{ form_obj.re_password.errors.0 }}</span>
</div>
</div> <div class="form-group">
<label for="{{ form_obj.email.id_for_label }}" class="col-sm-2 control-label">
{{ form_obj.email.label }}
</label>
<div class="col-sm-8">
{{ form_obj.email }}
<span class="help-block">{{ form_obj.email.errors.0 }}</span>
</div>
</div> <div class="form-group">
<label class="col-sm-2 control-label">
头像
</label>
<div class="col-sm-8">
<label for="id_avatar"><img id="avatar-img" src="/static/img/default.png"></label>
<input type="file" id="id_avatar" style="display: none;" name="avatar" accept="image/*">
</div>
</div> <div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<button id="reg-submit" type="button" class="btn btn-success">注册</button>
</div>
</div>
</form>
</div>
</div>
</div> {# <script src="/static/js/bootstrap.min.js"></script>#}
<script src="/static/js/jquery-1.12.4.js"></script>
<script>
$("#id_avatar").change(function () {
// 创建一个文件读取对象
var fileReader = new FileReader;
// 在更改前端图片之前，把文件内容读取完
fileReader.readAsDataURL(this.files[0]); // 读取文件是需要时间的
// 文件读取完后，重新加载到img当中
fileReader.onload = function () {
$("#avatar-img").attr("src", fileReader.result);
}
}); $("#reg-submit").click(function () {
var formData = new FormData;
formData.append("username", $("#id_username").val());
formData.append("password", $("#id_password").val());
formData.append("re_password", $("#id_re_password").val());
formData.append("email", $("#id_email").val());
// 这里传递的是文件对象，是为了能够定位文件,后台获取到这个文件对象后会通过models字段单中的upload_to="avator"参数传递到服务器目录。
formData.append("avatar", $("#id_avatar")[0].files[0]);
formData.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val()); /*
console.log($("#id_avatar"));
// 获取到了是一个jquery对象
// jQuery.fn.init [input#id_avatar, context: document, selector: "#id_avatar"] console.log($("#id_avatar")[0]);
// 获取到了input整个标签
// <input type="file" id="id_avatar" style="display:none" name="avatar"> console.log($("#id_avatar")[0].files);
// 获取了input标签当中的type="file"类型中的内容
//FileList {0: File, length: 1}
// 0: File {name: "风景.jpg", lastModified: 1553135747721, lastModifiedDate: Thu Mar 21 2019 10:35:47 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 27556, …}
// length: 1
// __proto__: FileList console.log($("#id_avatar")[0].files[0]);
// 获取到了整个上传的文件内容
// File {name: "风景.jpg", lastModified: 1553135747721, lastModifiedDate: Thu Mar 21 2019 10:35:47 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 27556, …}
*/ $.ajax({
url: "/register/",
type: "post",
// 当需要传输图片的时候，需要将processData和contentType设置为false
processData: false,
contentType: false,
data: formData,
success:function (data) {
// 这里data是后端返回的一个字典ret = {"status": 0, "msg": "/reg/"}
if (data.status){
// 有错误就展示错误
// console.log(data.msg);
// 将报错信息填写到页面上
$.each(data.msg, function (k,v) {
// console.log("id_"+k, v[0]);
// console.log($("#id_"+k));
$("#id_"+k).next("span").text(v[0]).parent().parent().addClass("has-error");
})
//console.log(123)
}else {
// 没有错误就跳转到指定页面，这里data是后端返回的一个字典ret = {"status": 0, "msg": "/reg/"}
location.href = data.msg;
}
}
})
}); // 当input获取焦点的事件，移除报错的样式，并且晴空报错信息。
$("form input").focus(function () {
$(this).next().text("").parent().parent().removeClass("has-error");
}) $("#id_username").blur(function () {
var username = $(this).val(); $.ajax({
url: "/check_username_exist/",
type: "get",
data: {"username": username},
success: function (data) {
if (data.status){
//$("#id_username").next.text(data.msg).parentElement().parentElement().addClass("has-error");
// 上面为错误写法
$("#id_username").next().text(data.msg).parent().parent().addClass("has-error");
}
}
})
})
</script>
</body>
</html>
register.html
views.py
def register(request):
if request.method == "POST":
ret = {"status": 0, "msg": ""}
form_obj = forms.RegForm(request.POST)
# print(request.POST)
if form_obj.is_valid():
# 数据库中没有re_password字段，需要从字典中剔除re_password字段
form_obj.cleaned_data.pop("re_password")
# 接收从ajax发送过来的的图片数据
avatar_img = request.FILES.get("avatar")
print(avatar_img)
models.UserInfo.objects.create_user(**form_obj.cleaned_data, avatar=avatar_img)
ret["msg"] = "/reg/" # ajax在接收到ret对象后，会将这个数据取出，并且将这个数据通过使用location.href作为跳转目录
return JsonResponse(ret)
else:
ret["status"] = 1
ret["msg"] = form_obj.errors
print(ret)
return JsonResponse(ret) form_obj = forms.RegForm()
return render(request, 'register.html', {"form_obj": form_obj}) def reg(request):
return render(request, 'index.html') # 这里直接回复HttpResponse即可
最后，也是最重要，添加url路由，切记切记
from django.views.static import serve
from django.conf import settings urlpatterns = [
re_path(r'^media/(?P<path>.*)$', serve, {"document_root": settings.MEDIA_ROOT}),
]
django中博客后台将图片上传作为用户头像的更多相关文章
- JSP+Servlet中使用jspsmartupload.jar进行图片上传下载
JSP+Servlet中使用cos.jar进行图片上传 upload.jsp <form action="FileServlet" method="post&quo ...
- JSP+Servlet中使用cos.jar进行图片上传（文件上传亦然）
链接:JSP+Servlet中使用jspsmartupload.jar进行图片上传下载 关于cos.jar,百度百科只有这么几句话(http://baike.baidu.com/subview/406 ...
- 在 PHP 中结合 Ajax 技术进行图片上传
前面几则日志中讲述了在 PHP 中上传文件,相信大家对 PHP 中如何进行文件上传已经初步掌握.本文来继续探讨在 PHP 中上传文件的技术,不同的是,本次上传将仅限于图片文件的上传,并且将采用 Aja ...
- Asp.net中FileUpload控件实现图片上传并带预览显示
单一图片上传——“选择”+“上传”,.NET默认模式: 1.实现原理: 采用FileUpload控件默认的使用方式,先由“选择”按钮选择图片,然后单击“上传”按钮完成上传,并可在“上传”按钮的 ...
- 在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能
前言 之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor ...
- 【原创】MVC项目中使用JQuery的upladify图片上传插件相关问题的解决方案
一. 关于Uploadify Uploadify是一个jQuery插件,你可以很容易的为你的网站添加多个文件上传功能.有两个不同的版本(HTML5和Flash)允许你灵活选择为您的网站和回退方法正确实 ...
- django中通过文件和Ajax来上传文件
一.通过form表单来上传文件 1.在html模板中 <form action="/index/" method="post" enctype=" ...
- Django搭建博客后台
转载自:http://sanwen8.cn/p/1cboypN.html 首先创建项目和blog应用: 在cmd命令行下,输入: django-admin.py startproject myblog ...
- hexo博客更新主题后上传Git操作
克隆主题: git clone https://github.com/SuperKieran/TKL.git _config.yml文件中主题改为新增主题 # Extensions ## Plugin ...
随机推荐
- jQuery笔记——DOM操作
在 JavaScript 中,DOM 不但内容庞大繁杂,而且我们开发的过程中需要考虑更多的兼容性.扩展性.在 jQuery 中,已经将最常用的 DOM 操 作方法进行了有效封装,并且不需要考虑浏览器的 ...
- web deploy 部署网站
一.服务端配置 1. 确保在服务器端(我目前是win server 2012 R2)安装管理服务 安装后服务器会重启, 2)安装webdeploy http://www.iis.net/downloa ...
- 参数传递中编码问题（Get/Post 方式）（一）
用JAVA在做一个支付接口时,需要和表现层的UTF8代码进行报文交换,因JAVA是GBK编码的,因此出现了小插曲.为此,花了点时间,重新梳理一下相关知识点. 以下内容是我转载的,觉得挺好的.... 一 ...
- 关于Pycharm中如何注释
主要有三种方法: ①在程序行前面加“#” ②将需要注释的代码用'''----''' 包起来,此方法类似C的注释方法 ③将需要注释的代码选住然后利用“Ctrl+/”进行注释 # test=input(' ...
- 「小程序JAVA实战」 小程序默认加载的页面和生命周期（八）
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-08/ 小程序如何加载的呢?生命周期!源码:https://github.com/limingios ...
- Shadow DOM的事件绑定
好悲催,阴世界的事件对象跑到光世界时,它的属性都被重写了,要自己做备份. <div id="root">Hello, world!</div> <sc ...
- 新浪微博logo已经去掉了“新浪”二字
如果有一天我能做出一个产品,它的命名就以我所在的行业命名该多好啊,可惜那只是一个梦.但这样的梦新浪微博却实现了,今天我登陆新浪微博的时候发 现logo已经去掉了“新浪”二字,我开始还以为我自己的电脑网 ...
- 【原创】0. MYSQL++的环境准备
1. 获取 Google MYSQL++,第一个就是,然后跟着要求进行下载. 2. 编译和安装 其实在作者的各种README文档里面已经写得很清楚了,现在对一些可能会出现问题的地方进行一下回顾. Wi ...
- 项目代码:js
1 //获取发文时间 function selectWriteTime(){ $("#writing_time_index").on("click"," ...
- 使用RVM更新Ruby 版本
http://rvm.io/rvm/install Install RVM (development version): \curl -sSL https://get.rvm.io | bash Wi ...