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:

<script>
var res_licenseImg;
$("#file_licenseImg").fileinput({
language: 'zh',
uploadUrl: urlQJ+'/uploadfiles',
allowedFileExtensions : ['jpg', 'png'],
maxFileSize: 5000,
maxFilesNum: 1,
showCaption: false,
showUpload: false,
slugCallback: function(filename) {
return filename.replace('(', '_').replace(']', '_');
}
});

$('#file_licenseImg').on('fileuploaded', function(event, data, previewId, index){
res_licenseImg = data.response.imgurl;
// console.log(res_licenseImg);
if(res_licenseImg){
$('.imgReg').css('display', 'inline')
$('#file_licenseImg').css('display', 'none');
$('.btn-file').css('display', 'none');
}
$('.fileinput-remove').click(function(){
$('#file_licenseImg').css('display', 'inline-block');
$('.btn-file').css('display', 'inline-block');
})
})
</script>

HTML:

<div class="col-sm-8" style="position:relative">
<input id="file_licenseImg" type="file"  class="file" >
<i class="fa fa-check regII imgReg" style="display:none"></i>
</div>