Django-Fileinput

最新推荐文章于 2025-06-15 06:36:44 发布

原创最新推荐文章于 2025-06-15 06:36:44 发布 · 837 阅读

1 ·

CC 4.0 BY-SA版权

原创同时被 3 个专栏收录

7 篇文章

订阅专栏

django

7 篇文章

订阅专栏

pycharm

5 篇文章

订阅专栏

本文详细介绍了如何在Django中实现文件上传功能，包括前台表单设计和后台处理逻辑，帮助开发者理解并掌握这一常见操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前台：

<input id="myfiles" class="file" type="file" name="file" multiple>

name是传给后台的！

<script>
        $(document).on('ready', function () {
                $("#myfiles").fileinput();
            });
        $('#myfiles').fileinput({
            language: 'zh',
            uploadUrl: '/FileUploads/',
            allowedFileExtensions: ['exe','jpg', 'png', 'gif','mp4','mp3','avi','rmvb','rar','zip','tar','doc','docx','xls','xlsx','pdf'],
            enctype:'multipart/form-data',
            showUpload:true,//上传按钮upload
            showRemove:true,//删除按钮remove
            //showPreview:true,//预览
            //showCaption:false,//标题
            maxFileSize:0,//KB//无限制
            maxFileCount:8,
            dropZoneEnabled:true,//拖拽区域
            browseClass: "btn btn-primary",
            uploadAsync:true,
            layoutTemplates:{
                //actionDelete: '',//去除上传预览的缩略图中的删除图标
                actionUpload: '',//去除上传预览的缩略图中的上传图标
                //actionZoom: '',//去除上传预览的缩略图中的详情图标
            },
            uploadExtraData: function () {
                return {};//uploadExtraData要么不设置，要么至少为空
            },
            previewFileIconSettings: {
                'docx':'<li class="fa fa-file-word-o text-primary"></li>',
                'doc':'<li class="fa fa-file-word-o text-primary"></li>',
                'xlsx':'<li class="fa fa-file-excel-o text-success"></li>',
                'xls':'<li class="fa fa-file-excel-o text-success"></li>',
                'ppt':'<li class="fa fa-file-powerpoint-o text-danger"></li>',
                'pptx':'<li class="fa fa-file-powerpoint-o text-muted"></li>',
                'pdf':'<li class="fa fa-file-achive-o text-muted"></li>',
            }
        }).on("fileuploaded",function (event,data,previewId,index) {
            console.log(data);
        });
    </script>

后台：以前写过，再贴一下

@csrf_exempt
def FileUploads(req):
    file = req.FILES.get('file')  # 获取文件对象，包括文件名文件大小和文件内容
    #print(file)
    curttime = time.strftime("%Y%m%d")
    upload_url = os.path.join(settings.MEDIA_ROOT,'attachment',curttime)
    #print(upload_url)
    folder = os.path.exists(upload_url)
    if not folder:
        os.makedirs(upload_url)
        print("创建文件夹")
    if file:
        file_name = file.name
        if os.path.exists(os.path.join(upload_url,file_name)):
            name, etx = os.path.splitext(file_name)
            addtime = time.strftime("%Y%m%d%H%M%S")
            finally_name = name + "_" + addtime + etx
            #print(name, etx, finally_name)
        else:
            finally_name = file.name

        upload_file_to = open(os.path.join(upload_url, finally_name), 'wb+')
        for chunk in file.chunks():
            upload_file_to.write(chunk)
        upload_file_to.close()

        file_upload_url = settings.MEDIA_URL + 'attachment/' + curttime + '/' +finally_name
        #print(file_upload_url)
        #构建返回值
        response_data = {}
        response_data['FileName'] = file_name
        response_data['FileUrl'] = file_upload_url
        response_json_data = json.dumps(response_data)
        #print(response_data, response_json_data)
        return HttpResponse(response_json_data)