Django框架中文件的上传 通过三种方式上传文件

鳄鱼君

发表文章数:615

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » Python » Django框架中文件的上传 通过三种方式上传文件

Django框架获取多个数据以及实现文件上传功能这篇文章中,我们是通过form表单上传文件,这里的文件就以图片为例,两者都是一样的。form表单的方式就不在说了,不会自己去看一下。现在我们通过ajax来实现文件上传,那么创建upload路由规则和对应的视图函数。

第一种方式,通过xhr对象

视图函数
def upload_file(request):
    username = request.POST.get('username') #测试用户名
    file_data = request.FILES.get('file') #拿到上传的文件
    with open(file_data.name,'wb') as f:
        for item in file_data.chunks():
            f.write(item)
    reg = {'code': True, 'data': request.POST.get('username')}  # 定义一个字典
    import json  # 转换为字符串
    return HttpResponse(json.dumps(reg))
def upload(request):  #文件上传页面
    return render(request, 'upload.html')

upload.html
<input type="file" id="file">
<input type="botton" value="xhr提交" onclick="xhrSubmit();">
<script>
    function xhrSubmit() {
        var file_obj=document.getElementById('file').files[0];  //拿到上传的文件
        var form_data=new FormData();
        form_data.append('username','鳄鱼君Ba');
        form_data.append('file',file_obj);
        var xhr=new XMLHttpRequest();
        xhr.open("POST","/upload_file/",true);
        xhr.onreadystatechange=function () {
            if(xhr.readyState===4)
                var obj=JSON.parse(xhr.responseText);
                console.log(obj);
        }
        xhr.send(form_data);
    }
</script>

第一种方式,通过jQuery

<input type="file" id="file">
<input type="botton" value="jQuery提交" onclick="jqSubmit();">
<script type="text/javascript" src="/static/jquery-3.4.1.js"></script>
<script>
    function jqSubmit() {
        var file_obj=document.getElementById('file').files[0];  //拿到上传的文件
        var form_data=new FormData();
        form_data.append('username','鳄鱼君Ba');
        form_data.append('file',file_obj);
        $.ajax({
            url:'/upload_file/',
            type:'POST',
            data:form_data,
            processData:false,
            contentType:false,
            success:function (data) {
            console.log(data);
            }
        })
    }

</script>

第一种方式,通过Iframe

<form action="/upload_file/" method="post" enctype="multipart/form-data" target="a1"> <!--让iframe跟form建立关系-->
    <iframe id="a1" name="a1" ></iframe>
    <input type="file" name="file">
    <input type="submit" onclick="iframeSubmit();" value="iframe提交">
</form>
<script type="text/javascript" src="/static/jquery-3.4.1.js"></script>
<script>
    // .load() ,  .error() ,  .unload() ,已经不在支持,jquery1.8版本之后的都无法再使用;
    //使用  .on("load",function(){.................}) 来代替  .load()  即可;
    function iframeSubmit() {
       $('#a1').on("load",function () {
            var text=$('#a1').contents().find('body').text();
            var obj=JSON.parse(text);
            console.log(obj);
       })
    }
</script>

iframe兼容性更好,在所有的浏览器都适用,一般图片上传都是采用iframe来实现。那么下面来实现图片的预览功能,这里可以在static文件夹下新建一个imags文件夹用于上传文件的路径。注意配置静态文件路径!!否则你的图片显示不出来:

def upload_file(request):
    import os
    file_data = request.FILES.get('file') #拿到上传的文件
    file_path = os.path.join('static/images/', file_data.name)  #新建目录存放上传的图片
    with open(file_path,'wb') as f:
        for item in file_data.chunks():
            f.write(item)
    reg = {'code': True, 'data': file_path}  # 将路径存放到data中
    import json  # 转换为字符串
    return HttpResponse(json.dumps(reg))
def upload(request):  #文件上传页面
    return render(request, 'upload.html')

upload.html
<form action="/upload_file/" method="post" enctype="multipart/form-data" target="a1"> <!--让iframe跟form建立关系-->
    <iframe id="a1" name="a1" ></iframe>
    <input type="file" name="file">
    <input type="submit" onclick="iframeSubmit();" value="iframe提交">
</form>
<div id="image"></div>
<script type="text/javascript" src="/static/jquery-3.4.1.js"></script>
<script>
    // .load() ,  .error() ,  .unload() ,已经不在支持,jquery1.8版本之后的都无法再使用;
    //使用  .on("load",function(){.................}) 来代替  .load()  即可;
    function iframeSubmit() {
       $('#a1').on("load",function () {
            var text=$('#a1').contents().find('body').text();
            var obj=JSON.parse(text);
            $('#image').empty(); //清空原来的
            var img_tag=document.createElement('img'); //创建img标签
            img_tag.src="/"+obj.data;  //设置src属性值
            $('#image').append(img_tag);
       })
    }
</script>

到此为止,三种方式就介绍完了,为了让上传图片更加合理,在上传图片的时候直接提交,不需要点击操作:

<form id="file1" action="/upload_file/" method="post" enctype="multipart/form-data" target="a1"> <!--让iframe跟form建立关系-->
    <iframe id="a1" name="a1"  style="display: none"></iframe>
    <input type="file" name="file" onchange="changeFile();">
</form>
<div id="image"></div>
<script type="text/javascript" src="/static/jquery-3.4.1.js"></script>
<script>
    function changeFile() {
     $('#a1').on("load",function () {
        var text=$('#a1').contents().find('body').text();
        var obj=JSON.parse(text);
        $('#image').empty(); //清空原来的
        var img_tag=document.createElement('img'); //创建img标签
        img_tag.src="/"+obj.data;  //设置src属性值
        $('#image').append(img_tag);
   })
    $('#file1').submit();
    }
</script>

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《Django框架中文件的上传 通过三种方式上传文件》 发布于2020-04-29

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

4 + 4 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册