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里

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

Python 相关文章推荐
Python实现TCP/IP协议下的端口转发及重定向示例
Jun 14 Python
python使用生成器实现可迭代对象
Mar 20 Python
Windows 7下Python Web环境搭建图文教程
Mar 20 Python
python根据txt文本批量创建文件夹
Dec 08 Python
Python玩转PDF的各种骚操作
May 06 Python
python中PS 图像调整算法原理之亮度调整
Jun 28 Python
Python函数的定义方式与函数参数问题实例分析
Dec 26 Python
python清空命令行方式
Jan 13 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
Feb 17 Python
浅谈Python 命令行参数argparse写入图片路径操作
Jul 12 Python
selenium如何定位span元素的实现
Jan 13 Python
python开发制作好看的时钟效果
May 02 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
You might like
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
smarty自定义函数用法示例
2016/05/20 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
深入了解python中元类的相关知识
2019/08/29 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
基于python实现删除指定文件类型
2020/07/21 Python
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
存储过程的优点有哪些
2012/09/27 面试题
2014离婚协议书范文
2014/09/10 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
2014个人年度工作总结
2014/12/15 职场文书
体育个人工作总结
2015/02/09 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers