Django项目实战之用户头像上传与访问
这篇文章主要介绍了Django项目实战之用户头像上传与访问的示例，现在分享给大家，也给大家做个参考。一起过来看看吧
1 将文件保存到服务器本地
upload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
<p>用户名:<input type="text" name="username"></p>
<p>头像<input type="file" name="avatar"></p>
<input type="submit" value="提交">
</form>
</body>
</html>urls.py
from django.conf.urls import url from app01 import views urlpatterns = [ url(r'^upload',views.upload) ]
views.py
from django.shortcuts import render,HttpResponse
def upload(request):
if request.method == 'POST':
name = request.POST.get('username')
avatar = request.FILES.get('avatar')
with open(avatar.name,'wb') as f:
for line in avatar:
f.write(line)
return HttpResponse('ok')
return render(request,'upload.html')总结
这样，我们就做好了一个基本的文件上传小示例，这里需要注意的有几点：
1.form表单里需要加上csrf_token验证
2.文件的input框的type的值为file
3.在视图函数中获取文件要用request.FILES.get()方法
4.通过obj.name可以获取文件的名字
2 将文件上传到数据库
models.py
from django.db import models class User(models.Model): username = models.CharField(max_length=16) avatar = models.FileField(upload_to='avatar')
views.py
def upload(request):
if request.method == 'POST':
name = request.POST.get('username')
avatar = request.FILES.get('avatar')
models.User.objects.create(username=name,avatar=avatar)
return HttpResponse('ok')
return render(request,'upload.html')总结
上面已经实现了将文件上传到数据库的功能，需要注意的有几点：
1.所谓的上传到数据库，不是讲图片本身或者二进制码放在数据库，实际上也是将文件上传到服务器本地，数据库只是存了一个文件的路径，这样用户要调用文件的时候就可以通过路径去服务器指定的位置找了
2.创建ORM的时候，avatar字段要有一个upload_to=''的属性，指定上传后的文件放在哪里
3.往数据库添加的时候，文件字段属性赋值跟普通字段在形式上是一样的，如：models.User.objects.create(username=name,avatar=avatar)
4.如果有两个用户上传的文件名重复，系统会自动将文件改名，效果如下：
附加
功能我们是实现了，看起来我们在调用文件的时候，只需要通过数据库文件路径已经保存的文件本身就可以访问图片，让它出现在网页上，其实并不是这样，
我们需要配置一些东西，django才可以找的到，不然的话就会过不了urls验证，而我们之所以可以直接访问static里的静态文件，是因为django已经帮我们配置好了。
配置步骤如下：
1、在站点的setting.py里配置
MEDIA_ROOT=os.path.join(BASE_DIR,"blog","media") #blog是项目名，media是约定成俗的文件夹名 MEDIA_URL="/media/" # 跟STATIC_URL类似，指定用户可以通过这个路径找到文件
2、在urls.py里配置
from django.views.static import serve
from upload import settings #upload是站点名
url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),配置完后，就可以通过http://127.0.0.1:8001/media/milk.png访问到图片了
3 用AJAX提交文件
upload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<form>
{% csrf_token %}
<p>用户名:<input id="name-input" type="text"></p>
<p>头像<input id="avatar-input" type="file"></p>
<input id="submit-btn" type="button" value="提交">
</form>
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script>
$('#submit-btn').on('click',function () {
formdata = new FormData();
formdata.append('username',$('#name-input').val());
formdata.append("avatar",$("#avatar")[0].files[0]);
formdata.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val());
$.ajax({
processData:false,contentType:false,url:'/upload', type:'post', data:formdata,success:function (arg)
{
if (arg.state == 1){ alert('成功！') }
else { alert('失败！') } } }) });
</script>
</body>
</html>views.py
from django.shortcuts import render,HttpResponse
from django.http import JsonResponse
from app01 import models
def upload(request):
if request.method == 'POST':
name = request.POST.get('username')
avatar = request.FILES.get('avatar')
try:
models.User.objects.create(username=name,avatar=avatar)
data = {'state':1}
except:
data = {'state':0}
return JsonResponse(data)
return render(request,'upload.html')总结
1.Ajax上传的时候，按钮的tpye一定不要用submit
2.Ajax上传的时候data参数的值不再是一个普通‘字典'类型的值，而是一个FormData对像
创建对象formdata = new FormData();
往里面添加值formdata.append('username',$('#name-input').val());
3.Ajax在做post提交的时候要加上csrf验证
formdata.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val());
4.最后，Ajax上传文件的时候要有两个参数设置
processData:false
contentType:false
4 上传图片文件的时候有预览功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<form>
<!----用一个label标签将上传文件输入框跟图片绑定一起，
点击图片的时候就相当于点击了上传文件的按钮---->
<label><img id="avatar-img" src="/static/img/default.png" width="80px" height="80px">
<p>头像<input id="avatar-input" hidden type="file"></p>
</label>
<input id="submit-btn" type="button" value="提交">
</form>
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script>
// 上传文件按钮（label里的图片）点击事件
$('#avatar-input').on('change',function () {
// 获取用户最后一次选择的图片
var choose_file=$(this)[0].files[0];
// 创建一个新的FileReader对象，用来读取文件信息
var reader=new FileReader();
// 读取用户上传的图片的路径
reader.readAsDataURL(choose_file);
// 读取完毕之后，将图片的src属性修改成用户上传的图片的本地路径
reader.onload=function () {
$("#avatar-img").attr("src",reader.result)
}
});
</script>5 大总结
对于文件上传，不管是直接form提交也好，Ajax提交也好，根本问题是要告诉浏览器你要上传的是一个文件而不是普通的字符串
而怎么样告诉浏览器呢，就是通过请求体重的ContentType参数，我们上传普通的字符串的时候不用指定，因为它有默认值，
而如果要传文件的话，就要另外指定了。总结以下几点
1.form表单上传的话是通过 enctype="multipart/form-data" 来指定ContentType
2.ajax上传的话是通过 processData:false 和 contentType:false来指定ContentType
3.form上传的时候，文件数据是通过标签来‘'包裹‘'数据，
4.ajax上传的时候，是通过一个 FormData 实例对象来添加数据，传递的时候传递这个对象就行了
5.数据传递过去之后，是封装在request.FILES里，而不是request.POST里
相关推荐：
以上是Django项目实战之用户头像上传与访问的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
如何用小红书号查找用户？能查到手机号吗？
Mar 22, 2024 am 08:40 AM
随着社交媒体的迅速发展，小红书已经成为了备受青睐的社交平台之一。用户可以通过创建小红书号来展示个人身份，并与其他用户交流互动。如果你需要查找某个用户的小红书号码，可以按照以下简单步骤进行操作。一、如何用小红书号查找用户？1.打开小红书APP，点击右下角的“发现”按钮，然后选择“笔记”选项。2.在笔记列表中，找到你想查找的用户发布的那篇笔记。点击进入笔记详情页。3.在笔记详情页中，点击用户头像下方的“关注”按钮，即可进入该用户的个人主页。4.在用户个人主页右上角，点击三个点按钮，然后选择“个人信息
以超级用户身份登录Ubuntu
Mar 20, 2024 am 10:55 AM
在Ubuntu系统中，root用户通常是禁用状态的。要激活root用户，可以使用passwd命令设置密码，然后使用su-命令以root身份登录。根用户是具有系统管理权限且不受限制的用户。他拥有访问和修改文件、用户管理、软件安装和删除，以及系统配置更改等权限。根用户与普通用户有着明显的区别，根用户拥有系统中最高的权限和更广泛的控制权。根用户可以执行重要的系统命令和编辑系统文件，而普通用户则无法做到这一点。在本指南中，我将探讨Ubuntu根用户，如何以根用户身份登录，以及它与普通用户的不同之处。注意
什么是 sudo，为什么它如此重要？
Feb 21, 2024 pm 07:01 PM
sudo（超级用户执行）是Linux和Unix系统中的一个关键命令，允许普通用户以root权限运行特定命令。sudo的功能主要体现在以下几个方面：提供权限控制：sudo通过授权用户以临时方式获取超级用户权限，从而实现了对系统资源和敏感操作的严格控制。普通用户只能在需要时通过sudo获得临时的特权，而不需要一直以超级用户身份登录。提升安全性：通过使用sudo，可以避免在常规操作中使用root账户。使用root账户进行所有操作可能会导致意外的系统损坏，因为任何错误或不小心的操作都将具有完全的权限。而
Django框架的优点和缺点：您需要知道的一切
Jan 19, 2024 am 09:09 AM
Django是一个完整的开发框架，该框架涵盖了Web开发生命周期的各个方面。目前，这个框架是全球范围内最流行的Web框架之一。如果你打算使用Django来构建自己的Web应用程序，那么你需要了解Django框架的优点和缺点。以下是您需要知道的一切，包括具体代码示例。Django优点：1.快速开发-Djang可以快速开发Web应用程序。它提供了丰富的库和内
Django vs. Flask：Python Web框架的对比分析
Jan 19, 2024 am 08:36 AM
Django和Flask都是PythonWeb框架中的佼佼者，它们都有着自己的优点和适用场景。本文将对这两个框架进行对比分析，并提供具体的代码示例。开发简介Django是一个全功能的Web框架，它的主要目的是为了快速开发复杂的Web应用。Django提供了许多内置的功能，比如ORM（对象关系映射）、表单、认证、管理后台等。这些功能使得Django在处理大型
Linux系统中的用户密码存储机制解析
Mar 20, 2024 pm 04:27 PM
Linux系统中的用户密码存储机制解析在Linux系统中，用户密码的存储是非常重要的安全机制之一。本文将解析Linux系统中用户密码的存储机制，包括密码的加密存储、密码的验证过程以及如何安全地管理用户密码。同时，将通过具体的代码示例展示密码存储的实际操作过程。一、密码的加密存储在Linux系统中，用户密码并不是以明文的形式存储在系统中，而是经过加密后保存。L
Win10如何更改账户名称和头像-详细步骤指南
Jan 14, 2024 pm 01:45 PM
注册了win10的账户之后，有很多的小伙伴觉得自己的头像都是默认的不是很好看，为此想要去改头像，下面就带来了更改头像的教程，想知道的可以来一起看看。win10账户名称怎么改头像：1、首先点击左下角开始。2、然后在弹出的菜单中点击上面的头像。3、进入之后点击“更改账户设置”。4、然后点击头像下面的“浏览”。5、找到自己想作为头像的照片进行选择。6、最后即可成功的修改完成。
如何升级Django版本：步骤和注意事项
Jan 19, 2024 am 10:16 AM
如何升级Django版本：步骤和注意事项，需要具体代码示例引言：Django是一个功能强大的PythonWeb框架，它持续地进行更新和升级，以提供更好的性能和更多的功能。然而，对于使用较旧版本Django的开发者来说，升级Django可能会面临一些挑战。本文将介绍如何升级Django版本的步骤和注意事项，并提供具体的代码示例。一、备份项目文件在升级Djan
