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

by Liu Yue/2019-03-25

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

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

前端代码：

{# 载入js库 #}
<script src='{% static "js/jquery-1.12.1.min.js" %}'></script>
<script src='{% static "js/jquery.Huploadify.js" %}'></script>

<body>

        <input type="text" value="100" id="t1">

        <div id="upload"></div>


    <script>

    let name = $("#t1").val();
    
    
    var up = $('#upload').Huploadify({
		auto:false,
		fileTypeExts:'*.*',
        multi:true,
		fileSizeLimit:99999999999,
        showUploadedPercent:true,
        formData:{'name':'123'},
		showUploadedSize:true,
        removeTimeout:9999999,
        method: 'post',
		uploader:'/md_admin/upload_img',
		onUploadStart:function(file){
            console.log(file.name+'开始上传');
            //$("#upload").Huploadify("settings","formData",{'name':'someValue'});
            uploadify_option.formData={name:'0'};
		},
		onInit:function(obj){
			console.log('初始化');
			console.log(obj);
		},
		onUploadComplete:function(file){
			console.log(file.name+'上传完成');
		},
		onCancel:function(file){
			console.log(file.name+'删除成功');
		},
		onClearQueue:function(queueItemCount){
			console.log('有'+queueItemCount+'个文件被删除了');
		},
		onDestroy:function(){
			console.log('destroyed!');
		},
		onSelect:function(file){
			console.log(file.name+'加入上传队列');
		},
		onQueueComplete:function(queueData){
			console.log('队列中的文件全部上传完成',queueData);
		}
	});

	
    
    
    </script>



    
</body>

后台视图文件：

#定义上传视图类
class UploadTest(View):

    #定义上传方法
    def post(self,request):
        #接收文件，以对象的形式
        img = request.FILES.get("file")
        print(request.POST.get('name','未收到参数'))
        #文件名称是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')

效果：

搞定收工。