Django实现前台上传并显示图片功能

1. 前台

templates/upload/upload.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<form action="/myupload/upload/" method="post" enctype="multipart/form-data">
  {% csrf_token %}
  名字：<input type="text" name="name"><br>
  头像：<input type="file" name="avator"><br>
  <input type="submit" value="提交">
</form>
</body>
</html>

2. 项目设定

settings.py

#添加

ALLOW_UPLOAD = ['jpg', 'png', 'jpeg']

3.app设定

urls.py

from django.contrib import admin
from django.urls import path, register_converter, re_path
from . import views

urlpatterns = [
  path('', views.index, name='index'), # 上传首页
  path('upload/', views.upload), # 上传图片
]

views.py

from django.shortcuts import render
from .models import User,Article
from django.http import HttpResponse
from django.conf import settings
from datetime import datetime
import os
from django.shortcuts import redirect, reverse
import hashlib

# Create your views here.
def index(request):
  users = User.objects.all()
  article = Article.objects.all()
  return render(request, 'myupload/index.html', locals())

def upload(request):
  if request.method == 'GET':
    return render(request, 'myupload/upload.html')
  else:
    name = request.POST.get('name')
    pic = request.FILES.get('avator')

    media_root = settings.MEDIA_ROOT # media
    allow_upload = settings.ALLOW_UPLOAD # ALLOW_UPLOAD
    # path = 'upload/{}/{}/{}/'.format(datetime.now().year, datetime.now().month, datetime.now().day)
    '{:02d}'.format
    path = 'upload/{}/{}/{}/'.format(datetime.now().year,'{:02d}'.format(datetime.now().month), '{:02d}'.format(datetime.now().day))
    full_path = media_root + '/' + path

    # full_path = 'media/upload/2019/12/20'
    if not os.path.exists(full_path): # 判断路径是否存在
      os.makedirs(full_path) # 创建此路径

    # 要不要改图片的名字 生成hash
    # 这块要不要判断图片类型 .jpg .png .jpeg
    # '/../../../myviews/setting.py'
    print(pic)
    print(full_path)
    print(full_path+pic.name)
    if pic.name.split('.')[-1] not in allow_upload:
      return HttpResponse('fail')

    with open(full_path + '/' + pic.name, 'wb') as f:
      for c in pic.chunks(): # 相当于切片
        f.write(c)

    User.objects.create(name=name, avator=path + pic.name)
    return redirect('myupload:index')

Django实现后台上传并显示图片功能

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

赞 (0)

相关推荐

  • Django1.9 加载通过ImageField上传的图片方法

    这里假设你是通过models的ImageField上传图片,并期望在前台img标签中能显示.能否访问图片关键在于,是否能通过正确的路径访问. 在models.py中有image如下 image = models.ImageField(upload_to='images/%Y/%m', verbose_name='文件缩略图') 在显示页面中如show.html中使用img标签显示 <img class="center-block thumbnail" src="{{re

  • 在django中图片上传的格式校验及大小方法

    如下所示: Uploadfiles = request.FILES.get('参数', '') for i in Uploadfiles : # 图片大小的属性 i.size suffix = os.path.splitext(i.name)[1] if not suffix: return False elif suffix.lower() == '.jpeg' or suffix.lower() == ".png" or suffix.lower() == ".jpg&q

  • django mysql数据库及图片上传接口详解

    django mysql数据库及图片上传接口详解

    前言 我们在 django-rest-framework解析请求参数 文章中完成了接口文档到参数解析, 一个完整的流程中还缺少对数据库的操作. 本篇内容为django连接数据库, 并编写一个image表用来存储图片路径, 编写图片上传接口和查看数据库中所有图片路径的接口. 前期准备 django操作图片需要安装一个三方库叫做,Pillow workon python35 pip install pillow pip install pymysql Pillow这个库可以对图片进行操作, 例如生成

  • PIL对上传到Django的图片进行处理并保存的实例

    1. 介绍 上传的图片文件:如 pic = request.FILES["picture"] # pic是 <class 'django.core.files.uploadedfile.InMemoryUploadedFile'> 类型的数据 # 而pillow的Image.open("./xxx.jpg") 则是: <class 'PIL.JpegImagePlugin.JpegImageFile'> 类型的数据 # 问题是如何把InMem

  • django将图片上传数据库后在前端显式的方法

    1.使用ImageField先安装pillow模块 pip install pillow 2.在app的models中设置 class Image(models.Model): pic_name=models.CharField('图片',max_length=40) pic_path=models.ImageField(upload_to="pic_folder/",default='pic_folder/None/no_image.pig') 3.在app的view中设置获取图片的

  • Django如何实现上传图片功能

    Django如何实现上传图片功能

    前言 很多时候我们要用到图片上传功能,如果图片一直用放在别的网站上,通过加载网址的方式来显示的话其实也挺麻烦的,我们通过使用 django-filer 这个模块实现将图片文件直接放在自己的网站上. 感兴趣的同学可以看下官方介绍:https://github.com/divio/django-filer 1. 使用 pip 安装. pip install django-filer 这个模块需要 django-mptt, easy_thumbnails, django-polymorphic 以及

  • Django 实现图片上传和显示过程详解

    第1章 新建工程和创建app 新建工程和创建app就不用贴出来了,我这里是测试图片上传的功能能否实现,所以项目都是新的,正常在以有的app下就可以 第2章 模型层: 2.1创建数据库 from django.dbimport models # Create your models here. class User(models.Model): name= models.CharField(max_length=50) # upload_to 指定上传文件位置 # 这里指定存放在img/ 目录下

  • Django框架文件上传与自定义图片上传路径、上传文件名操作分析

    本文实例讲述了Django框架文件上传与自定义图片上传路径.上传文件名操作.分享给大家供大家参考,具体如下: 文件上传 1.创建上传文件夹 在static文件夹下创建uploads用于存储接收上传的文件 在settings中配置, MEDIA_ROOT=os.path.join(BASE_DIR,r'static/uploads') 2.定义上传表单 <form action="{% url 'app:do_upload' %}" method="post"

  • Django实现前台上传并显示图片功能

    1. 前台 templates/upload/upload.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="/myupload/upload/" method=

  • Django实现后台上传并显示图片功能

    1.安装pillow pip install Pillow 2.创建app python manage.py startapp upload 3. project设定 settings.py INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'dj

  • php+ajax实现异步上传文件或图片功能

    本文为大家分享了ajax异步上传文件或图片功能的具体代码,供大家参考,具体内容如下 //html代码 <form enctype="multipart/form-data" id="upForm"> <input type="file" name="file" ><br><br> <input type="button" value="提交&q

  • Java实现的上传并压缩图片功能【可等比例压缩或原尺寸压缩】

    Java实现的上传并压缩图片功能【可等比例压缩或原尺寸压缩】

    本文实例讲述了Java实现的上传并压缩图片功能.分享给大家供大家参考,具体如下: 先看效果: 原图:1.33M 处理后:27.4kb 关键代码: package codeGenerate.util; import java.awt.Color; import java.awt.Graphics2D; import java.awt.Image; import java.awt.image.BufferedImage; import java.io.File; import java.io.Fil

  • axios+Vue实现上传文件显示进度功能

    axios+Vue实现上传文件显示进度功能

    一,前言 最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了 二,效果 三,代码 HTML代码 <div id="app"> <h4>上传文件:</h4> <p class="input-zone"> <span v-if="filename">{{filename}}</span> <span v-else>+请选择文件上传

  • 微信小程序实现云开发上传文件、图片功能

    目录 一.前言 二.功能简介 1.选择微信聊天记录中的文件 2.选择本地相册/拍照图片 3.上传功能 三.实现代码 1.选择聊天文件函数(js) 2.选择相册函数(js) 3.上传文件函数(js) 4.调用示例 4-1.云存储新建文件夹 4-2.完整调用代码 4-3.实现效果 四.结语 一.前言 今天的博客所实现的功能很简单,但是也很常用. 本文将这常用的代码进行了封装,可以放入自己utils类中使用,加快开发速度. 实现的功能有两个: 一.选择微信聊天文件并上传. 二.选择本地相册/拍摄图片上

  • JavaScript实现无刷新上传预览图片功能

    无刷新上传功能如何实现?手写无刷新上传要用到两个东西,FormData和FileReader. FileReader 用于图片浏览. FormData 用于ajax请求. html代码 先创建表单跟图片的容器 <form enctype="multipart/form-data" id="oForm"> <input type="file" name="file" id="file" on

  • SpringMVC多个文件上传及上传后立即显示图片功能

    多文件上传就是改良一个方法把MultipartFile类换成CommonsMultipartFile类,因为上传多个文件用数组方式的话MultipartFile类不能初始化,它不支持数组 package com.meng.upload; import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream; import javax.servlet.http.HttpServletRe

  • vue+springboot图片上传和显示的示例代码

    一.前言 在使用spring boot做后台系统,vue做前端系统,给客户开发一套系统时候,其中用到了图片上传和显示的功能. 二.环境 前端:vue 前端组件:tinymce 后台:spring boot:2.2.3 三.正文 在客户开发一套门户管理系统时,集成了tinymce组件,用于编辑内容,springboot不同于其他项目.  是集成tomcat的,文件和图片是不能直接访问的.所以我在做集成富文本编辑器时,需要处理图片的问题. 这个问题跟上传头像等显示图片的功能是类似的.下面记录详情步骤

随机推荐