Django上传并显示图片实例

百变鹏仔 2小时前 #Python

文章标签实例

Django上传并显示图片

非常详细的教程，教大家一步步用django上传与显示图片。用例子学习是一个不错的方法，下面我用一个非常简单的例子为大家讲解django中图片的上传与显示。

1. 创建名称为‘a’的项目

<span class="line">1<br/></span>

<span class="line"><span class="variable">$django-admin startproject a<br/></span></span>

2.在项目‘a’中创建名为‘b’的app

<span class="line">1<br/><span class="line">2<br/></span></span>

<span class="line"><span class="variable">$cd a<br/><span class="line"><span class="variable">$python manage.py startapp b<br/></span></span></span></span>

3.把b加入到settings.py中的INSTALLED_APPS中

<span class="line">1<br/><span class="line">2<br/><span class="line">3<br/><span class="line">4<br/><span class="line">5<br/><span class="line">6<br/><span class="line">7<br/><span class="line">8<br/><span class="line">9<br/></span></span></span></span></span></span></span></span></span>

<span class="line">INSTALLED_APPS = (<br/><span class="line">    <span class="string">'django.contrib.admin',<br/><span class="line">    <span class="string">'django.contrib.auth',<br/><span class="line">    <span class="string">'django.contrib.contenttypes',<br/><span class="line">    <span class="string">'django.contrib.sessions',<br/><span class="line">    <span class="string">'django.contrib.messages',<br/><span class="line">    <span class="string">'django.contrib.staticfiles',<br/><span class="line">    <span class="string">'b',<br/><span class="line">)<br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

4.在文件夹b下，编辑models.py,创建IMG类

<span class="line">1<br/><span class="line">2<br/><span class="line">3<br/><span class="line">4<br/><span class="line">5<br/></span></span></span></span></span>

<span class="line"><span class="keyword">from __future__ <span class="keyword">import unicode_literals<br/><span class="line"><span class="keyword">from django.db <span class="keyword">import models<br/><span class="line"><span class="comment"># Create your models here.<br/><span class="line"><span class="class"><span class="keyword">class <span class="title">IMG<span class="params">(models.Model):<br/><span class="line">    img = models.ImageField(upload_to=<span class="string">'upload')<br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

5.更新数据库

<span class="line">1<br/><span class="line">2<br/><span class="line">3<br/><span class="line">4<br/><span class="line">5<br/><span class="line">6<br/></span></span></span></span></span></span>

<span class="line">Django 1.7及以上的版本需要用以下命令<br/><span class="line">python manage.py makemigrations<br/><span class="line">python manage.py migrate<br/><span class="line"><br/><span class="line">Django 1.7以下用以下命令<br/><span class="line">python manage.py syncdb<br/></span></span></span></span></span></span>

6.在文件夹b下，编辑views.py，创建图片上传与显示函数

<span class="line">1<br/><span class="line">2<br/><span class="line">3<br/><span class="line">4<br/><span class="line">5<br/><span class="line">6<br/><span class="line">7<br/><span class="line">8<br/><span class="line">9<br/><span class="line">10<br/><span class="line">11<br/><span class="line">12<br/><span class="line">13<br/><span class="line">14<br/><span class="line">15<br/><span class="line">16<br/><span class="line">17<br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

<span class="line"><span class="keyword">from django.shortcuts <span class="keyword">import render<br/><span class="line"><span class="keyword">from b.models <span class="keyword">import IMG<br/><span class="line"><span class="comment"># Create your views here.<br/><span class="line"><span class="function"><span class="keyword">def <span class="title">uploadImg<span class="params">(request):<br/><span class="line">    <span class="keyword">if request.method == <span class="string">'POST':<br/><span class="line">        new_img = IMG(<br/><span class="line">            img=request.FILES.get(<span class="string">'img')<br/><span class="line">        )<br/><span class="line">        new_img.save()<br/><span class="line">    <span class="keyword">return render(request, <span class="string">'b/uploadimg.html')<br/><span class="line"><br/><span class="line"><span class="function"><span class="keyword">def <span class="title">showImg<span class="params">(request):<br/><span class="line">    imgs = IMG.objects.all()<br/><span class="line">    content = {<br/><span class="line">        <span class="string">'imgs':imgs,<br/><span class="line">    }<br/><span class="line">    <span class="keyword">return render(request, <span class="string">'b/showimg.html', content)<br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

7.在a文件夹下，编辑urls.py文件

<span class="line">1<br/><span class="line">2<br/><span class="line">3<br/><span class="line">4<br/><span class="line">5<br/><span class="line">6<br/><span class="line">7<br/><span class="line">8<br/><span class="line">9<br/><span class="line">10<br/><span class="line">11<br/><span class="line">12<br/></span></span></span></span></span></span></span></span></span></span></span></span>

<span class="line"><span class="keyword">from django.conf.urls <span class="keyword">import url<br/><span class="line"><span class="keyword">from django.contrib <span class="keyword">import admin<br/><span class="line"><span class="keyword">from b <span class="keyword">import views<br/><span class="line"><span class="keyword">from django.conf.urls.static <span class="keyword">import static<br/><span class="line"><span class="keyword">from django.conf <span class="keyword">import settings<br/><span class="line"><br/><span class="line"><br/><span class="line">urlpatterns = [<br/><span class="line">    url(<span class="string">r'^admin/', admin.site.urls),<br/><span class="line">    url(<span class="string">r'^upload', <span class="string">'b.views.uploadImg'),<br/><span class="line">    url(<span class="string">r'^show', <span class="string">'b.views.showImg'),<br/><span class="line">] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)<br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

8.编辑a文件夹下的setting.py文件，添加如下代码：

<span class="line">1<br/><span class="line">2<br/></span></span>

<span class="line">MEDIA_URL = <span class="string">'/media/'<br/><span class="line">MEDIA_ROOT = os.path.join(BASE_DIR, <span class="string">'media').replace(<span class="string">'\', <span class="string">'/')<br/></span></span></span></span></span></span>

9.在b文件夹下创建templates文件夹，再在templates文件夹下创建b文件夹，再在新创建的b文件夹下创建uploadimg.html文件，内容如下：

<span class="line">1<br/><span class="line">2<br/><span class="line">3<br/><span class="line">4<br/><span class="line">5<br/></span></span></span></span></span>

<span class="line"><span class="tag"><<span class="name">form <span class="attr">method=<span class="string">"POST" <span class="attr">enctype=<span class="string">"multipart/form-data"><br/><span class="line">{% csrf_token %}<br/><span class="line"><span class="tag"><<span class="name">input <span class="attr">type=<span class="string">"file" <span class="attr">name=<span class="string">"img"><br/><span class="line"><span class="tag"><<span class="name">button <span class="attr">type=<span class="string">"submit">上传<span class="tag"></<span class="name">button><br/><span class="line"><span class="tag"></<span class="name">form><br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

10.在uploadimg.html同目录下创建showimg.html文件

<span class="line">1<br/><span class="line">2<br/><span class="line">3<br/></span></span></span>

<span class="line">{% for img in imgs %}<br/><span class="line"><span class="tag"><<span class="name">img <span class="attr">src=<span class="string">'{{ img.img.url }}' /><br/><span class="line">{% endfor %}<br/></span></span></span></span></span></span></span>

11.运行django程序

<span class="line">1<br/></span>

<span class="line"><span class="variable">$python manage.py runserver<br/></span></span>

12.上传图片

打开浏览器，输入地址：http://127.0.0.1:8000/upload,进入图片上传页面，点击“浏览”，选择要上传的图片，“上传”之。因为页面设计的比较简单，所以大家上传图片后，在本页面看不到任何变化，但确实已经上传了；

13.显示上传的图片

在浏览器中输入：http://127.0.0.1:8000/show，就会看到我们已经上传的图片。

PS：以上步骤仅仅是非常简单的图片上传与显示，更多复杂的图片上传显示问题，大家可以在次基础上修改。

文章推荐