首页
所有分类
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 参数列表中的self 显式不等于冗余
Dec 01 Python
python基础教程之字典操作详解
Mar 25 Python
python 安装virtualenv和virtualenvwrapper的方法
Jan 13 Python
python 读写中文json的实例详解
Oct 29 Python
对Python 文件夹遍历和文件查找的实例讲解
Apr 26 Python
Python基础学习之时间转换函数用法详解
Jun 18 Python
python按键按住不放持续响应的实例代码
Jul 17 Python
Django CBV类的用法详解
Jul 26 Python
在pytorch中对非叶节点的变量计算梯度实例
Jan 10 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
Feb 14 Python
如何实现更换Jupyter Notebook内核Python版本
May 18 Python
python+selenium小米商城红米K40手机自动抢购的示例代码
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
V Rising(1) 自定义函数(1) Spring Security(2) 动态权限(1) Kotlin(1) AOP(2) 记事本(1) Navicat(1) maven(2) Android Gradle(1)
You might like
php实现的在线人员函数库
2008/04/09 PHP
19个Android常用工具类汇总
2014/12/30 PHP
Laravel 队列使用的实现
2019/01/08 PHP
一个刚完成的layout（拖动流畅，不受iframe影响）
2007/08/17 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
JavaScript中的闭包
2016/02/24 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
vue实现文件上传功能
2018/08/13 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
JS实现canvas简单小画板功能
2020/06/23 Javascript
Python学习笔记_数据排序方法
2014/05/22 Python
Python中random模块生成随机数详解
2016/03/10 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
香港化妆品经销商：我的公主
2016/08/05 全球购物
经济信息管理专业大学生求职信
2013/09/27 职场文书
六十大寿答谢词
2014/01/12 职场文书
家居饰品店创业计划书
2014/01/31 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
公司委托书格式范本
2014/09/16 职场文书
先进班集体事迹材料
2014/12/25 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python
利用Python实现模拟登录知乎
2022/05/25 Python
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python