Django通过 ajax实现图片的上传功能


发布时间:2019-02-15 13:08    作者: Uncle Hui   已过去:1 年,7 月   阅读总量:337 已被赞:0


实现图片上传,主要有两种方式,第一种是传统的上传,第二种是通过模型操作

本篇主要详细介绍第一种方式:

(1).前端html的编写

<div class="form-group">
  <label for="inputPassword4" class="col-sm-2 control-label">缩略图</label>
  <div class="col-sm-10">
    <div class="input-group">
        <input type="text" class="form-control" id="thumbnail-form" name="thumbnail">
                <span class="input-group-btn">
                    <label class="btn btn-default btn-file">
                        上传图片<input hidden type="file" class="btn btn-default" id="thumbnail-btn">
                    </label>
                </span>
           </div>
  </div>
</div>

这里将input 通过hidden来隐藏,使得样式更美观。id="thumbnail-btn" 是后台ajax获取的标识,ajax返回给id="thumbnail-form" 显示

(2).后端配置

1.MEDIA的配置,settings.py,并在项目下新建media文件夹

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR,'media')

2.处理视图

import os
from django.conf import settings #引入配置文件
#图片上传到服务器
@require_POST
def upload_file(request):
    #文件上传要通过FILES.get方法获取,‘file’是ajax自定义的名字,要一致
    file = request.FILES.get('file')
    #获取上传文件的名字
    name = file.name
    #通过os找到指定的media文件,
    with open(os.path.join(settings.MEDIA_ROOT,name),'wb') as fp:
        for chunk in file.chunks():#分块写入
            fp.write(chunk)
            #request.build_absolute_uri 方法能生成完整前缀url
    url = request.build_absolute_uri(settings.MEDIA_URL+name)
    # http://127.0.1:8000/media/abc.jpg
    #调用restful下的result方法,返回data,给前端显示
    return restful.result(data={'url':url})

3.在总路由上配置URL

from django.conf import settings
from django.conf.urls.static import static

 

urlpatterns = [
    path('cms/',include('apps.cms.urls')),#后端管理系统
  ......
] + static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

 

4.分路由的配置

path('upload_file/', upload_file, name='upload_file'),#图片上传路由

 

5.js的书写

//函数定义
function AddNews() {

};
//监听
AddNews.prototype.run = function () {
    var self =this;
    self.listAddnewssytEvent();
};
//内容
AddNews.prototype.listAddnewssytEvent =function () {
    //获取按钮
    var sytbtn = $('#thumbnail-btn');
    //这里是上传文件,不是去绑定事件,应使用change方法获取上传内容
    sytbtn.change(function () {
        // 获取上传按钮里的第一条第一个文件(一次只能穿一)
        var file = sytbtn[0].files[0];
        //新建一个FormData()
        var formData = new FormData();
        //将获取的文件以K名'file'传递去后台,后台通过'file'拿
        formData.append('file',file);
        //上传文件不需要模态,就直接调用ajax传递
        xfzajax.post({
           'url': '/cms/upload_file/',
            'data': formData,
            'processData': false,//这两个字段必须要
            'contentType': false, //这两个字段必须要
            'success':function (result) {
                if(result['code']===200){
                    //获取返回的data里的K,’url‘
                    var url = result['data']['url'];
                    //获取需要显示的哪个框的id
                    var thumbnailInput = $("#thumbnail-form");
                    //把内容显示进去
                    thumbnailInput.val(url);
                }
            }
        });
        
    });
};

$(function () {
    var news = new AddNews();
    news.run();
});

6.前端引入js

<script src="{% static 'js/add_news.js' %}"></script>

点赞

0




登陆后方可评论