Django2.0.4+Uploadify3.0(h5版) 实现多文件异步上传和删除
已经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')
效果：
搞定收工。