华山资源网

Django项目实战之用户头像上传与访问的示例
脚本专栏 2024/11/17 佚名
3 1

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 %}
  <div>用户名:<input type="text" name="username"></div>
  <div>头像<input type="file" name="avatar"></div>
  <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项目实战之用户头像上传与访问的示例

附加

功能我们是实现了，看起来我们在调用文件的时候，只需要通过数据库文件路径已经保存的文件本身就可以访问图片，让它出现在网页上，其实并不是这样，

我们需要配置一些东西，django才可以找的到，不然的话就会过不了urls验证，而我们之所以可以直接访问static里的静态文件，是因为django已经帮我们配置好了。

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/("htmlcode">



<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
<form>
  {% csrf_token %}
  <div>用户名:<input id="name-input" type="text"></div>

  <div>头像<input id="avatar-input" type="file"></div>
  <input id="submit-btn" type="button" value="提交">
</form>
<script src="/UploadFiles/2021-04-08/jquery-3.2.1.min.js">


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对像


    
  
  1. 创建对象formdata = new FormData(); 
    2. 
  
  2. 往里面添加值formdata.append('username',$('#name-input').val());
    3. 



3.Ajax在做post提交的时候要加上csrf验证


    
  
  1. formdata.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val());
    2. 



4.最后，Ajax上传文件的时候要有两个参数设置


    
  
  1. processData:false
    2. 
  
  2. contentType:false
    3. 



 4 上传图片文件的时候有预览功能







<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
<form>
  <!----用一个label标签将上传文件输入框跟图片绑定一起，
     点击图片的时候就相当于点击了上传文件的按钮---->
  <label><img id="avatar-img" src="/UploadFiles/2021-04-08/default.png">


5 大总结




对于文件上传，不管是直接form提交也好，Ajax提交也好，根本问题是要告诉浏览器你要上传的是一个文件而不是普通的字符串




而怎么样告诉浏览器呢，就是通过请求体重的ContentType参数，我们上传普通的字符串的时候不用指定，因为它有默认值，




而如果要传文件的话，就要另外指定了。总结以下几点

 1.form表单上传的话是通过 enctype="multipart/form-data" 来指定ContentType

 2.ajax上传的话是通过  processData:false 和 contentType:false来指定ContentType

 3.form上传的时候，文件数据是通过<input type="file">标签来‘'包裹‘'数据，

 4.ajax上传的时候，是通过一个 FormData 实例对象来添加数据，传递的时候传递这个对象就行了

 5.数据传递过去之后，是封装在request.FILES里，而不是request.POST里




以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


                                

                                

                                     

                                
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com