8

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

 2 years ago
source link: https://v3u.cn/a_id_56
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

首页 - Python/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')
20190325090350_24452.jpeg
搞定收工。

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK