基于django和dropzone.js实现上传文件

1、dropzone.js

http://www.dropzonejs.com/

dropzone.js是一个可预览\可定制化的文件拖拽上传,实现AJAX异步上传文件的工具

2、dropzone.js前端界面上传方式

官网下载 并且引入dropzone.js和dropzone.css(http://www.dropzonejs.com/)以及引用jquery.js,定义一个class="dropzone"即可完成,

代码示例:




  
  Flask upload with Dropzone example
  
  
  

方法1:

//这段代码是展示dropzone.js的精髓,class一定要是dropzone,id可以自定义

方法2:

//这段代码是展示dropzone.js的精髓,class一定要是dropzone,id可以自定义

方法二中,很多参数是不一定需要定义的,参见方法一

3、后台处理dropzone.js前端界面上传的文件

A、django的settings.py 文件定义上传文件夹:

#文件上传文件夹定义
ENROLLED_DATA = '%s/statics/enrolled_data' %BASE_DIR

B、对应的view处理前端上传过来的数据:

from django.views.decorators.csrf import csrf_exempt
from PerfectCRM.settings import *
import os
@csrf_exempt
def upload(request):
  if request.method =='POST': #post方式
    if request.is_ajax():  #如果是ajax请求
      if not os.path.exists(ENROLLED_DATA): #如果settings定义的 上传文件夹不存在
        os.makedirs(ENROLLED_DATA,exist_ok=True) #新建文件夹
      for k,file_obj in request.FILES.items(): #获取前端传过来的文件数据
        with open('%s/%s'%(ENROLLED_DATA,file_obj.name),"wb") as f: #打开文件
          for chunk in file_obj.chunks():   
            f.write(chunk)  #chunk方式写入文件
  return render(request, 'dropzone-back.html')

C、上传成功:

基于django和dropzone.js实现上传文件_第1张图片

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

你可能感兴趣的:(基于django和dropzone.js实现上传文件)