首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Python

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

Posted in Python onApril 21, 2018

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/(?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 %}
  <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="/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对像

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

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

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

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

  1. processData:false
  2. 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">
    <div>头像<input id="avatar-input" hidden type="file"></div>

  </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上传的时候，文件数据是通过<input type="file">标签来‘'包裹‘'数据，
 4.ajax上传的时候，是通过一个 FormData 实例对象来添加数据，传递的时候传递这个对象就行了
 5.数据传递过去之后，是封装在request.FILES里，而不是request.POST里

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

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

- Author -

人生不如戏

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Python 相关文章推荐
python实现的希尔排序算法实例
Jul 01 Python
Django中URL视图函数的一些高级概念介绍
Jul 20 Python
Python实现按特定格式对文件进行读写的方法示例
Nov 30 Python
基于Django contrib Comments 评论模块(详解)
Dec 08 Python
python定向爬取淘宝商品价格
Feb 27 Python
Pandas:DataFrame对象的基础操作方法
Jun 07 Python
Python实现的简单排列组合算法示例
Jul 04 Python
Python学习笔记之视频人脸检测识别实例教程
Mar 06 Python
python实现画出e指数函数的图像
Nov 21 Python
python支持多线程的爬虫实例
Dec 21 Python
Python利用Scrapy框架爬取豆瓣电影示例
Jan 17 Python
PyQt5+Pycharm安装和配置图文教程详解
Mar 24 Python
基于Python 装饰器装饰类中的方法实例
Apr 21 #Python
使用python装饰器计算函数运行时间的实例
Apr 21 #Python
Python实现针对给定字符串寻找最长非重复子串的方法
Apr 21 #Python
Python 实现一行输入多个值的方法
Apr 21 #Python
Python实现接受任意个数参数的函数方法
Apr 21 #Python
深入分析python数据挖掘 Json结构分析
Apr 21 #Python
Python编程中NotImplementedError的使用方法
Apr 21 #Python
PL550(1) PL450(1) RP2100(1) 低放电路(1) GF515(1) BCL3000(2) ICF-SW7600(1) 乐信(1) H-501(1) SHARP(1)
You might like
PHP脚本的10个技巧(1)
2006/10/09 PHP
PHP将进程作为守护进程的方法
2015/03/19 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
jquery 元素控制(追加元素/追加内容)介绍及应用
2013/04/21 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
js下拉菜单语言选项简单实现
2013/09/23 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
Python读取word文本操作详解
2018/01/22 Python
基于Python 装饰器装饰类中的方法实例
2018/04/21 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
java判断三位数的实例讲解
2019/06/10 Python
python超时重新请求解决方案
2019/10/21 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
python中uuid模块实例浅析
2020/12/29 Python
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
大三自我鉴定范文
2013/10/05 职场文书
采购部主管岗位职责
2014/01/01 职场文书
开学典礼感言
2014/02/16 职场文书
超市开店计划书
2014/04/26 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
超市店庆活动方案
2014/08/31 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
2015年小学重阳节活动总结
2015/07/29 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
我的收音机情缘
2022/04/05 无线电