前端页面上传文件夹的方法

（一）form表单，仅支持谷歌浏览器

<form action="/multi_upload" enctype="multipart/form-data" method="post">
      <input type="hidden" name="type" value="1"/>
      <input id="dir" type="file" name="file" webkitdirectory mozdirectory/>
      <input id="uploadDir" type="submit" value="提交文件夹">
</form>

后台接收保存：

 

def multi_upload(request):
    result = {'status':''}
    if request.method == "POST":
        data = request.FILES.getlist('file')
        
        for f in data:
            destination = open('e:/temp/' + f.name, 'wb+')
            for chunk in f.chunks():
                destination.write(chunk)
            destination.close()

    return render(request,'data_center.html')

 

（二）ajax方式，仅支持谷歌浏览器

html代码    

<input id="load" type="file" onchange="commit_dir(this)" multiple/>

js代码

commit_dir = function (obj) {

        var files = obj.files;
        var formData = new FormData();

        for(var i=0;i<files.length;i++){
            //console.log(files[i])
            //console.log('up_file'+String(i))
            formData.append('up_file'+String(i),files[i])
        }

        $.ajax({
                url: '/multi_upload/',
                type: 'post',
                data: formData,
                
                processData: false,// 告诉jQuery不要去处理发送的数据(必须设置)
                contentType: false, // 告诉jQuery不要去设置Content-Type请求头（必须设置）
                success: function () {

                }
        })


    }

后台接收保存的代码：

def multi_upload(request):
    result = {'status':''}
    if request.method == "POST":
        data = request.FILES.items()
        print(data)
        for f in data:
            destination = open('e:/temp/' + f[1].name, 'wb+')
            for chunk in f[1].chunks():
                destination.write(chunk)
            destination.close()

        result['status'] = 'success'
    return JsonResponse(result)