首页
所有分类
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中生成器和yield语句的用法详解
Apr 17 Python
讲解Python中的递归函数
Apr 27 Python
python模拟enum枚举类型的方法小结
Apr 30 Python
详解Tensorflow数据读取有三种方式（next_batch）
Feb 01 Python
解决pycharm无法调用pip安装的包问题
May 18 Python
对Python3.x版本print函数左右对齐详解
Dec 22 Python
django解决跨域请求的问题详解
Jan 20 Python
python使用mitmproxy抓取浏览器请求的方法
Jul 02 Python
python并发编程多进程 模拟抢票实现过程
Aug 20 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
Mar 06 Python
Django多层嵌套ManyToMany字段ORM操作详解
May 19 Python
tensorflow实现从.ckpt文件中读取任意变量
May 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) 复读(1) DBLink(1) IIS7(1) 事务并发(1) innoDB(3) MVCC(4) 幻读(5) GZIP(2) .NET Framework(2)
You might like
解析php中如何调用用户自定义函数
2013/08/06 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
PHP中基本HTTP认证技巧分析
2015/03/16 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
js Dialog 实践分享
2012/10/22 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
Angular2使用SVG自定义图表（条形图、折线图）组件示例
2019/05/10 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
javascript实现扫雷简易版
2020/08/18 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
Python实现发送email的几种常用方法
2014/08/18 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
Python进程池Pool应用实例分析
2019/11/27 Python
浅谈tensorflow之内存暴涨问题
2020/02/05 Python
德国最大的网上足球商店：11teamsports
2019/09/11 全球购物
毕业生个人求职信范例分享
2013/12/17 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
新人入职感言
2015/07/31 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技
Python制作春联的示例代码
2022/01/22 Python
MySQL如何使备份得数据保持一致
2022/05/02 MySQL