django使用uploadify上传文件

最新推荐文章于 2021-08-06 02:43:02 发布

shangliuyan

最新推荐文章于 2021-08-06 02:43:02 发布

阅读量8.3k

点赞数

分类专栏： web前端 jquery Django 文章标签： django file upload function path stylesheet

本文链接：https://blog.csdn.net/shangliuyan/article/details/7469251

版权

Django 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

web前端

6 篇文章 0 订阅

订阅专栏

jquery

5 篇文章 0 订阅

订阅专栏

本文是根据

Django使用Uploadify组件实现图片上传

这篇博客改编而成，包括上传文件和删除上传文件的功能

首先是前端代码：

<!DOCTYPE html>
<html>
<head>
<title></title>
<!--以下css,js地址都要根据自己文件配置而改变-->
<link href="/static/css/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript" src="/static/js/swfobject.js"></script>
<script type="text/javascript" src="/static/js/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
  var file_name='';
  $('#file_upload').uploadify({
    'uploader'  : '/static/image/uploadify/uploadify.swf',//根据文件存放地址改变
    'script'    : '/upload_script/',
    'cancelImg' : '/static/image/uploadify/cancel.png',//根据文件存放地址改变
    'folder'    : '/upload',
    'auto'      : true,//false,//
    'multi': false,//设置可以上传多个文件
    'simUploadLimit':1,
   'buttonText':'上传',   
    'removeCompleted':false,//
    'sizeLimit':10240000,//设置上传文件大小单位kb
    'fileExt':'*.doc;*.docx;*.odt',//设置上传文件类型为常用文档格式
    'fileDesc':'支持文档格式',                
    'onInit': function () {},
    'onError' : function (event,ID,fileObj,errorObj) {
            $('#id_span_msg').html("上传失败，错误码:"+errorObj.type+" "+errorObj.info);
        },
    'onSelect': function (e, queueId, fileObj) {
        $('#id_span_msg').html("");
    },
	'onCancel'    : function(event,ID,fileObj,data) {
      $.post("/delete_uploadfile/", { delete_file: file_name } );
      file_name='';
    },
    'onComplete': function(event, ID, fileObj, response, data) {
    	var result = eval ("(" + response + ")");
  	 	file_name=result.save_name;
    }
  });
});
</script>
</head>

<body>

<h1>Uploadify组件上传方式</h1>
<div class="demo-box">
    <input id="file_upload" type="file" name="Filedata">
    <div id="file_uploadQueue" class="uploadifyQueue"></div>
    <p><span id="id_span_msg"></span></p>
</div>

</div>
</body>
</html>

注：如果使用官网下载的uploadify文件，以上代码中的js中的 'buttonText':'上传' 会显示乱码，需要修改原始的uploadify文件，方法见中文按钮乱码问题解决

django view代码：

@csrf_exempt
def uploadify_script(request):
    ret="0"
    file = request.FILES.get("Filedata",None)
    if file:
        result,new_name=profile_upload(file)
        if result:
            ret="1"
        else:
            ret="2"                    
    json={'ret':ret,'save_name':new_name}
    return HttpResponse(simplejson.dumps(json,ensure_ascii = False))


def profile_upload(file):
    '''文件上传函数'''
    if file:
        path=os.path.join(settings.MEDIA_ROOT,'upload')
        #file_name=str(uuid.uuid1())+".jpg"
        file_name=str(uuid.uuid1())+'-'+file.name
        #fname = os.path.join(settings.MEDIA_ROOT,filename)
        path_file=os.path.join(path,file_name)
        fp = open(path_file, 'wb')
        for content in file.chunks(): 
            fp.write(content)
        fp.close()
        return (True,file_name) #change
    return (False,file_name)   #change

#用户管理-添加用户-删除附件

@csrf_exempt
def profile_delte(request):
    del_file=request.POST.get("delete_file",'')
    if del_file:
        path_file=os.path.join(settings.MEDIA_ROOT,'upload',del_file)
        os.remove(path_file)

django url配置

    url(r'^upload_script/$','fontlib.UserAndRole.views.uploadify_script'),#测试用户管理-上传
    url(r'^delete_uploadfile/$','fontlib.UserAndRole.views.profile_delte'),#测试用户管理-删除上传附件

uploadify使用其他参考：

中文按钮乱码问题解决

上传时加入session判断