Django2.0.4+Uploadify3.0(h5版) 实现多文件异步上传和删除

最新推荐文章于 2021-07-29 23:16:11 发布

BinYkala

最新推荐文章于 2021-07-29 23:16:11 发布

阅读量414

点赞数

分类专栏：小知识点转载文章标签： python Django

小知识点同时被 2 个专栏收录

51 篇文章 0 订阅

订阅专栏

转载

4 篇文章 0 订阅

订阅专栏

已经9012年了，如果你的网站还通过传统表单上传文件的话，那你简直low到爆了，也别干什么web开发了，直接面壁去吧。

本文基于Uploadify异步上传控件来实现多文件异步上传的无刷新机制，用来提高效率和用户体验，由于uploadify基于jquery，所以确保已经引入了稳定版的Jquery,另外需要说明的是，uploadify分为flash版和h5版，鉴于flash早就已经被淘汰了，所以h5才是我们的选择，但是h5版居然需要收费，下一个要五美刀，我们当然不能当冤大头，可以考虑去下载一个免费的山寨开源版：https://github.com/Double-Lv/Huploadify

前端代码：

　　{# 引入外链式css #}
    <link rel="stylesheet" type="text/css" href='{% static "css/Huploadify.css" %}' />
    {# 载入js库 #}
    <script src='{% static "js/jquery-1.12.1.min.js" %}'></script>
    <script src='{% static "js/jquery.Huploadify.js" %}'></script>
　　<body>
            {# 定义一个上传容器 #}
            <div id='upload'></div>
    <script>
    
    //定义异步上传对象
    let up = $("#upload").Huploadify({

        //是否自动上传
        auto:true,
        //设置文件大小限制
        fileSizeLimit:9999999999999,
        //设置删除延时
        removeTimeout:99999999,
        //文件类型
        fileTypeExts:'*.*',
        //是否多文件
        multi:true,
        //是否显示进度条
        showUploadedPercent:true,
        //是否显示文件大小
        showUploadedSize:true,
        method:'post',
        //请求的url
        uploader:'/upload_img',
        //回调方法
        onUploadComplete:function(file){

            console.log(file.name+'上传成功');

        },
        //删除文件
        onCancel:function(file){

            console.log(file.name+'删除成功');


        }

    });
    </script>
</body>

后台视图文件：

class UploadTest(View):

#定义上传方法
def post(self,request):
    #接收文件，以对象的形式
    img = request.FILES.get("file")
    #文件名称是name属性
    #建立文件流对象
    f = open(os.path.join(UPLOAD_ROOT,'',img.name),'wb')
    #写文件 遍历图片文件流
    for chunk in img.chunks():
        f.write(chunk)
    #关闭文件流
    f.close()
    return HttpResponse(json.dumps({'status':'ok'},ensure_ascii=False),content_type='application/json')

效果：
在这里插入图片描述