首页
所有分类
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搭建APNS苹果推送通知推送服务的相关模块使用指南
Jun 02 Python
谈谈如何手动释放Python的内存
Dec 17 Python
Python中super函数的用法
Nov 17 Python
基于pip install django失败时的解决方法
Jun 12 Python
Python中交换两个元素的实现方法
Jun 29 Python
对Python Pexpect 模块的使用说明详解
Feb 14 Python
pyqt 实现在Widgets中显示图片和文字的方法
Jun 13 Python
python获取依赖包和安装依赖包教程
Feb 13 Python
Python如何设置指定窗口为前台活动窗口
Aug 12 Python
完美解决Pycharm中matplotlib画图中文乱码问题
Jan 11 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
Feb 26 Python
总结几个非常实用的Python库
Jun 26 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
优先队列(1) pongo2(1) 数据合并(1) 连接查询(1) 动态代理(1) 复合索引(1) element-ui(1) 逻辑函数(1) 模板引擎(1) Carbon(1)
You might like
PHP引用返回用法示例
2016/05/28 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
javascript 冒号 使用说明
2009/06/06 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
JS版的date函数（和PHP的date函数一样）
2014/05/12 Javascript
Ionic快速安装教程
2016/06/03 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
python+mongodb数据抓取详细介绍
2017/10/25 Python
Mac中Python 3环境下安装scrapy的方法教程
2017/10/26 Python
Python实现的求解最大公约数算法示例
2018/05/03 Python
详解Python3注释知识点
2019/02/19 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
机械设计制造专业个人求职信
2013/09/25 职场文书
土木工程专业自荐信
2013/10/04 职场文书
运动会通讯稿50字
2014/01/30 职场文书
安全大检查实施方案
2014/02/22 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
校园环保建议书
2014/05/14 职场文书
行政助理岗位职责
2015/02/10 职场文书
宣传部部长竞选稿
2015/11/21 职场文书