django 通过bootstrap fileinput 上传图片

django 通过bootstrap fileinput 上传图片

实现在django框架下，通过bootstrap前端框架的fileinput控件上传图片

django 1.10.3
bootstrap

1.在app目录下创建图片文件夹

我的项目名称为myproject，我的app名称为myapp，创建的图片存放文件名称为uploadfiles
目录结构如下：
|–myproject
–|–myapp
—–|–urls.py
—–|–uploadfiles
—–|–settings
——–|–dev.py [配置文件]

2.配置文件

在配置文件dev.py中，新增如下代码：

import os

PROJECT_DIR = os.path.abspath(os.path.join(os.path.dirname(__file__), os.path.pardir))
......

# 放置上传的图片
UPLOADFILES = os.path.join(PROJECT_DIR, 'uploadfiles')

3.具体实现

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import os
import time
from PIL import ImageFile
from myproject.settings import dev
from django.http import JsonResponse, HttpResponse

def _upload(file, path):
    """
    图片上传函数
    """
    if file:
        _n = "%d" % (time.time() * 1000)
        _f = time.strftime("%Y%m%d", time.localtime())

        file_name = _f + _n+".jpg"
        path_file = os.path.join(path, file_name)
        parser = ImageFile.Parser()
        for chunk in file.chunks():
            parser.feed(chunk)
        img = parser.close()
        try:
            if img.mode != "RGB":
                img = img.convert("RGB")
            img.save(path_file, 'jpeg', quality=100)

        except:
            return None
        return file_name
    return None


def uploadify_script(request):
    """
    通过bootstrap fileinput 上传图片
    """
    result = {"data": []}
    path = os.path.join(dev.UPLOADFILES)

    try:
        response = HttpResponse()
        response['Content-Type'] = "text/javascript"
        ret = -1
        file = request.FILES.get("file_data", None) 
        if file:
            imgurl = _upload(file, path)
            if not imgurl:
                ret = 1
            ret = 0
            result["imgurl"] = imgurl
            result.update(code_msg(ret))
        return JsonResponse(result)

    except Exception:
        return JsonResponse(result)

4.配置路由

在urls.py文件中增：

from django.conf.urls.static import static
from ktv_project.common import uploadimg
from ktv_project.settings.dev import UPLOADFILES
......

"""
上传 图片
"""
urlpatterns += [
    url(r'^uploadfiles$', uploadimg.uploadify_script),
]
"""
显示 图片
"""
urlpatterns += static('/uploadfiles/', document_root=UPLOADFILES)

"""

5.前端代码(仅供参考)

JS:

HTML:

class="col-sm-8" style="position:relative">
    " type="file"  class="file" >
    " style="display:none">