20-1 django上传文件和项目里上传头像如何查看
一 普通上传方式
1 views
def upload(request):
if request.method == "POST":
# print(request.POST)
# print(request.FILES)
# 从上传的文件数据中拿到 avatar对应的文件对象
file_obj = request.FILES.get("avatar")
# 在服务端新建一个和上传文件同名的新文件
with open(file_obj.name, "wb") as f:
# 从上传文件对象中一点一点读数据
for i in file_obj:
# 写入服务端新建的文件
f.write(i)
return HttpResponse("OK")
return render(request, "upload.html")
2 html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
{% csrf_token %} 上传头像:
<input type="file" name="avatar">
</p>
<input type="submit" value="提交">
</form> </body>
</html>
二 ajax上传方式
1 views.py
# ajax_upload上传
def ajax_upload(request):
if request.method == "POST":
# print(request.POST)
# print(request.FILES)
# 从上传的文件数据中拿到 avatar对应的文件对象
file_obj = request.FILES.get("avatar")
# 在服务端新建一个和上传文件同名的新文件
with open(file_obj.name, "wb") as f:
# 从上传文件对象中一点一点读数据
for i in file_obj:
# 写入服务端新建的文件
f.write(i)
return HttpResponse("OK")
return render(request, "ajax_upload.html")
2 html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax上传文件</title>
</head>
<body>
<input type="file" name="avatar" id="i1">
<input type="button" value="上传" id="b1">
{% csrf_token %}
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$("#b1").click(function () {
// 先生成一个FormData对象
// 将要提交的数据 append 到FormData对象中
var fd = new FormData();
fd.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
fd.append("avatar", $("#i1")[0].files[0]); // 获取文件名字
$.ajax({
url: "/ajax_upload/",
type: "post",
data: fd,
contentType: false,
processData: false,
success: function (res) {
console.log(res) } }) }); </script> </body>
</html>
三 如何注册的时候上传头像并显示
1 urls配置:
from django.views.static import serve # 用户上传文件用的模块
from django.conf import settings # 同样是上传用的
url(r'^media/(?P<path>.*)', serve, {"document_root": settings.MEDIA_ROOT}),
2 setting.py
# 告诉djanjo项目用户上传的文件保存在哪个目录下
MEDIA_ROOT = os.path.join(BASE_DIR, "upload")
# 告诉用户用哪个前缀来访问刚才的定义的那个目录别名
MEDIA_URL = "/media/"
3 views配置:
class RegisterView(views.View):
'''
如果是get请求,就返回注册页面,用的form写的注册页面,先导入刚才写的forms模块,然后调用RggisterForm
如果是post请求(就是提交请求),form_obj获取到用户填的所有内容,然后去校验数据格式是否正确,如果没问题,就去
数据库里面创建数据,创建之前,要先删除re_password这个字段,因为数据库里没有这个字段
然后接受头像文件,需要用request.FILES,去获取
最后去数据库保存,需要把你的普通数据和头像数据分开来存储。
注册成功之后,就跳转到登录界面,否则就报报错信息返回到页面上面
''' def get(self, request):
form_obj = forms.RegisterForm()
return render(request, "register.html", locals()) def post(self, request):
res = {"code": 0}
form_obj = forms.RegisterForm(request.POST)
if form_obj.is_valid():
# 数据没问题,去数据库创建记录
form_obj.cleaned_data.pop("re_password")
# 头像数据,文件对象
avatar_obj = request.FILES.get("avatar")
# 头像文件保存到数据库,如果你的models里面写的这个字段FileField,就会自动写在服务器上面
models.UserInfo.objects.create_user(**form_obj.cleaned_data, avatar=avatar_obj)
res["url"] = "/login/"
else:
# 数据有问题
res["code"] = 1
res["error"] = form_obj.errors
return JsonResponse(res)
4 html配置;
register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form class="register-form">
{% csrf_token %}
{% for field in form_obj %}
<div class="form-group">
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
{{ field }}
<span class="help-block"></span> </div>
{% endfor %}
<div class="form-group">
<label for="id_avatar">头像
<img src="/static/images/default.png" id="avatar-img" style="width: 60px">
</label>
<input type="file" id="id_avatar" accept="image/*" class="form-control" style="display: none"> </div>
<div style="text-align: center">
<button style="width: 100px" type="button" class="btn btn-success" id="submit-btn">提交</button> </div> </form>
</div>
</div> </div>
<script src="/static/plugins/jquery-3.3.1.min.js"></script>
<script src="/static/plugins/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script src="/static/js/register.js"></script> </body>
</html>
js配置:
// 设置错误提示
$("#submit-btn").click(function () {
// 因为注册功能有头像文件 数据,所以要用FormData对象提交数据
var fd = new FormData();
fd.append("username", $("#id_username").val());
fd.append("password", $("#id_password").val());
fd.append("re_password", $("#id_re_password").val());
fd.append("phone", $("#id_phone").val());
fd.append("email", $("#id_email").val());
fd.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
// avatar头像
fd.append("avatar", $("#id_avatar")[0].files[0]);
$.ajax({
url: "/register/",
type: "post",
data: fd,
contentType: false,
processData: false,
success: function (res) {
if (res.code === 1) {
$.each(res.error, function (k, v) {
console.log(k, v[0]);
{
// #先找到input标签,下面的那个标签,然后设置错误信息,再找到显示错误标签的父标签,设置has - error }
$("#id_" + k).next().text(v[0]).parent().addClass("has-error");
})
} else {
location.href = res.url
} }
}) }); // 给input标签绑定获取焦点就删除错误提示的动作
$(".register-form input").focus(function () {
$(this).next().text("").parent().removeClass("has-error");
}); //头像预览功能
//值发生变化了
$("#id_avatar").change(function () {
// 取到用户选中的头像文件
var fileObj = this.files[0]; //路径
// 新建一个FileReader对象,从本地磁盘加载文件数据
var fr = new FileReader();
fr.readAsDataURL(fileObj);
// 读取文件是需要时间的
fr.onload = function () {
// 找到头像预览的img标签,把它的src属性设置成我读取的用户选中的图片
$("#avatar-img").attr("src", fr.result) //结果
} });
index.html首页导航条图像显示
<li><img style="height: 40px;width: 40px;border-radius: 50%" src="/media/{{ request.user.avatar }}"></li>
20-1 django上传文件和项目里上传头像如何查看的更多相关文章
- django 基于form表单上传文件和基于ajax上传文件
一.基于form表单上传文件 1.html里是有一个input type="file" 和 ‘submit’的标签 2.vies.py def fileupload(request ...
- jmert中如何测试上传文件接口(测试上传excel文件)
第一次用jmeter这个工具测试上传接口,以前没做过这一块,导致走了很多弯路.特地把经验谢谢,怕自己以后忘记... 一,jmeter如何上传文件 jmeter 的 http requests post ...
- GitHub上传文件或项目的教程
既然是往GitHub上传文件,那GitHub账号必须得有,这时候就会有同学问:妖怪吧,我没有GitHub账号怎么办? 别急别急,打开GitHub网站https://github.com/,然后注册就O ...
- Spring Boot 上传文件 获取项目根路径 物理地址 resttemplate上传文件
springboot部署之后无法获取项目目录的问题: 之前看到网上有提问在开发一个springboot的项目时,在项目部署的时候遇到一个问题:就是我将项目导出为jar包,然后用java -jar 运行 ...
- django中通过文件和Ajax来上传文件
一.通过form表单来上传文件 1.在html模板中 <form action="/index/" method="post" enctype=" ...
- element ui实现手动上传文件,且只能上传单个文件,并能覆盖上传。
element ui提供了成熟的组件场景,但实际工作中难免会遇到认(sha)真(diao)的产品.比如,最近遇到的,要求实现手动上传特定格式文件(用户点击“上传文件”按钮,确定之后,只是单纯选择了文件 ...
- js上传文件过大导致上传失败原因以及解决办法
背景:项目需要用到上传视频功能,由于视频有知识产权,要求必须上传到自己的服务器上不允许用第三方视频网站接口上传,于是一开始开始用的是input type=file去上传,小的视频上传没有问题,上传将近 ...
- .net 实现上传文件分割,断点续传上传文件
一 介绍 断点续传搜索大部分都是下载的断点续传,涉及到HTTP协议1.1的Range和Content-Range头. 来个简单的介绍 所谓断点续传,也就是要从文件已经下载的地方开始继续下载.在以前版本 ...
- iOS上传文件,有关http上传协议-RFC1867
以上是抓包HTML input file标签上传的内容 只要模拟上面http 的header跟body就可以成功. 整体说明: post 上传文件时,以在http body里面带参数,参数的格式,根据 ...
随机推荐
- draft.js开发富文本编辑器
写在前头的话 在react中去寻找一个好用的富文本编辑器网上很少有推荐的,搜到的也只有一些个人不成熟的作品,慢慢发现网上比较推荐的一个东东叫做draft.js. 这个东西在网上可以找到的教程也是手指头 ...
- UOJ#428. 【集训队作业2018】普通的计数题
#428. [集训队作业2018]普通的计数题 模型转化好题 所以变成统计有标号合法的树的个数. 合法限制: 1.根标号比子树都大 2.如果儿子全是叶子,数量B中有 3.如果存在一个儿子不是叶子,数量 ...
- char类型和int类型之间的转换
在视屏课程第二章里,我们已经学习了一些常用的数据类型转换.然而,有一些时候我们会经常会遇到将char类型转换成int类型,或者需要将int类型转换为char类型的情况. 这里,我们来探讨一下这种不常用 ...
- Intent传递list集合时异常解决
以前只是用intent传递一些简单的值,最近传递list集合时发现值总是传不过去,logcat报如下错误 说的是不能处理值为null的情况,回过头看list集合时确实发现有value为null的key ...
- windows服务器nginx日志分割
编写一个bat文件 @echo off rem @echo off rem 取1天之前的日期 echo wscript.echo dateadd(,date) >%tmp%\tmp.vbs fo ...
- FATAL ERROR in native method: JDWP No transports initialized, jvmtiError=AGENT_ERROR_TRANSPORT_INIT(197)
自从继承了hibernate ,全都是些奇葩问题. 努力解决中,先发布,以备忘
- div代码大全 DIV代码使用说明
一.DIV代码语法 - TOP DIV代码是放入小于与大于符号内,即“<div>”. DIV是一对闭合标签,即“”开始,“结束”的盒子标签. 语法结构: <div>我是内容&l ...
- Log4j---文件解析以及语法使用
Log4j------是Apache的一个开源项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台.文件.GUI组件,甚至是套接口服务器.NT的事件记录器.UNIX Syslog守护进程 ...
- vue项目及插件
vue项目的创建 方法1: cmd中执行 vue ui vue会创建一个socket,方便快捷 方法2: 命令行建立 vue create v-proj //创建项目名为v-proj的项目文件 > ...
- 【P2616】 【USACO10JAN】购买饲料II Buying Feed, II
P2616 [USACO10JAN]购买饲料II Buying Feed, II 题目描述 Farmer John needs to travel to town to pick up K (1 &l ...