Django项目实战之用户头像上传与访问-Python教程-PHP中文网

首页

后端开发

Python教程

Django项目实战之用户头像上传与访问

不言

Apr 21, 2018 pm 02:49 PM

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&#39;^upload&#39;,views.upload)
]

views.py

from django.shortcuts import render,HttpResponse 
def upload(request):
  if request.method == &#39;POST&#39;:
    name = request.POST.get(&#39;username&#39;)
    avatar = request.FILES.get(&#39;avatar&#39;)
    with open(avatar.name,&#39;wb&#39;) as f:
      for line in avatar:
        f.write(line)
    return HttpResponse(&#39;ok&#39;)
  return render(request,&#39;upload.html&#39;)

总结

这样，我们就做好了一个基本的文件上传小示例，这里需要注意的有几点：
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=&#39;avatar&#39;)

views.py

def upload(request):
  if request.method == &#39;POST&#39;:
    name = request.POST.get(&#39;username&#39;)
    avatar = request.FILES.get(&#39;avatar&#39;)
    models.User.objects.create(username=name,avatar=avatar)
    return HttpResponse(&#39;ok&#39;) 
  return render(request,&#39;upload.html&#39;)

总结

上面已经实现了将文件上传到数据库的功能，需要注意的有几点：
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&#39;^media/(?P<path>.*)$&#39;, serve, {&#39;document_root&#39;: 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>
  $(&#39;#submit-btn&#39;).on(&#39;click&#39;,function () {
    formdata = new FormData();
    formdata.append(&#39;username&#39;,$(&#39;#name-input&#39;).val());
    formdata.append("avatar",$("#avatar")[0].files[0]);
    formdata.append("csrfmiddlewaretoken",$("[name=&#39;csrfmiddlewaretoken&#39;]").val()); 
 $.ajax({
 processData:false,contentType:false,url:&#39;/upload&#39;, type:&#39;post&#39;, data:formdata,success:function (arg)
 { 
if (arg.state == 1){ alert(&#39;成功！&#39;) }
else { alert(&#39;失败！&#39;) } } }) });
 </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 == &#39;POST&#39;:
    name = request.POST.get(&#39;username&#39;)
    avatar = request.FILES.get(&#39;avatar&#39;)
    try:
      models.User.objects.create(username=name,avatar=avatar)
      data = {&#39;state&#39;:1}
    except:
      data = {&#39;state&#39;:0}
    return JsonResponse(data)
  return render(request,&#39;upload.html&#39;)

总结

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里的图片）点击事件
  $(&#39;#avatar-input&#39;).on(&#39;change&#39;,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上传的时候，文件数据是通过a2dc5349fb8bb852eaec4b6390c03b14标签来‘'包裹‘'数据，
4.ajax上传的时候，是通过一个 FormData 实例对象来添加数据，传递的时候传递这个对象就行了
5.数据传递过去之后，是封装在request.FILES里，而不是request.POST里

相关推荐：

Django如何加载css和js文件以及静态图片

django控件及传参使用详解

以上是Django项目实战之用户头像上传与访问的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

Python与C：学习曲线和易用性Apr 19, 2025 am 12:20 AM

Python更易学且易用，C 则更强大但复杂。1.Python语法简洁，适合初学者，动态类型和自动内存管理使其易用，但可能导致运行时错误。2.C 提供低级控制和高级特性，适合高性能应用，但学习门槛高，需手动管理内存和类型安全。

Python vs. C：内存管理和控制Apr 19, 2025 am 12:17 AM

Python和C 在内存管理和控制方面的差异显着。 1.Python使用自动内存管理，基于引用计数和垃圾回收，简化了程序员的工作。 2.C 则要求手动管理内存，提供更多控制权但增加了复杂性和出错风险。选择哪种语言应基于项目需求和团队技术栈。

科学计算的Python：详细的外观Apr 19, 2025 am 12:15 AM

Python在科学计算中的应用包括数据分析、机器学习、数值模拟和可视化。1.Numpy提供高效的多维数组和数学函数。2.SciPy扩展Numpy功能，提供优化和线性代数工具。3.Pandas用于数据处理和分析。4.Matplotlib用于生成各种图表和可视化结果。

Python和C：找到合适的工具Apr 19, 2025 am 12:04 AM

选择Python还是C 取决于项目需求：1)Python适合快速开发、数据科学和脚本编写，因其简洁语法和丰富库；2)C 适用于需要高性能和底层控制的场景，如系统编程和游戏开发，因其编译型和手动内存管理。

数据科学和机器学习的PythonApr 19, 2025 am 12:02 AM

Python在数据科学和机器学习中的应用广泛，主要依赖于其简洁性和强大的库生态系统。1）Pandas用于数据处理和分析，2）Numpy提供高效的数值计算，3）Scikit-learn用于机器学习模型构建和优化，这些库让Python成为数据科学和机器学习的理想工具。

学习Python：2小时的每日学习是否足够？Apr 18, 2025 am 12:22 AM

每天学习Python两个小时是否足够？这取决于你的目标和学习方法。1)制定清晰的学习计划，2)选择合适的学习资源和方法，3)动手实践和复习巩固，可以在这段时间内逐步掌握Python的基本知识和高级功能。

Web开发的Python：关键应用程序Apr 18, 2025 am 12:20 AM

Python在Web开发中的关键应用包括使用Django和Flask框架、API开发、数据分析与可视化、机器学习与AI、以及性能优化。1.Django和Flask框架：Django适合快速开发复杂应用，Flask适用于小型或高度自定义项目。2.API开发：使用Flask或DjangoRESTFramework构建RESTfulAPI。3.数据分析与可视化：利用Python处理数据并通过Web界面展示。4.机器学习与AI：Python用于构建智能Web应用。5.性能优化：通过异步编程、缓存和代码优