python之路 - day64 Content-Type 文件上传 (form表单、ajax 两种方式)

参考博客: https://www.cnblogs.com/yuanchenqi/articles/7638956.html

文件上传

1.使用form表单 进行文件的上传

1. html文件。需要在form表单里，设置好 Content-Type: multipart/form-data

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
</head>
<body>
<h1>1.文件上传 (form表单的形式)</h1>
<form action="/file_upload/" method="post" enctype="multipart/form-data">
    用户名:<input type="text" name="user">
    密码: <input type="password" name="pwd">
    头像: <input type="file" name="file_info">
    <input type="submit" value="提交">
</form>

</body>
</html>

　　

 2. views.py

def file_upload(request):
    '''文件上传'''
    if  request.method=='GET':
        return render(request, 'file_upload.html')
    else:
        print("request.POST是:", request.POST) # request.POST是: <QueryDict: {'user': ['fengyu'], 'pwd': ['122']}>  通过request.POST取普通键值
        print('request.FILES:',request.FILES) # request.FILES: <MultiValueDict: {'file_info': [<InMemoryUploadedFile: timg.jpg (image/jpeg)>]}> 通过request.FILES 取文件
        file_obj=request.FILES.get('file_info') # 根据键名称，取出文件句柄
        file_path=file_obj.name # 获取上传的文件名称

        #文件操作，保存到本地
        import os
        from Ajax import settings
        file_path=os.path.join(settings.BASE_DIR,'Media','pic',file_path) #拼接文件保存路径
        with open(file_path,'wb') as f: #写入到本地
            for line in file_obj:
                f.write(line)

        return HttpResponse('上传成功')

　　　

 

 2.使用 ajax 进行文件的上传

 html文件

　　

<body>
<h1>1.文件上传 (form表单的形式)</h1>
<form action="/file_upload/" method="post" enctype="multipart/form-data">
    用户名:<input type="text" name="user">
    密码: <input type="password" name="pwd">
    头像: <input type="file" name="file_info">
    <input type="submit" value="提交">
</form>

<h1>2. Ajax形式的文件上传</h1>
<div>
    用户名:<input type="text" id="user">
    密码: <input type="password" id="pwd">
    文件: <input type="file" id="file" >
    <input type="button" CLASS="btn" value="提交"> <span class="message"></span>
</div>

<script src="/static/js/jquery.js"></script>
<script>
    //文件上传
    $('.btn').click(function () {
        var formdata=new FormData(); //实例化一个FormData对象
        formdata.append('file_info',$('#file')[0].files[0]); //难点: 找到input标签，获取用户选择的文件
        formdata.append('user',$('#user').val()); //追加 user: **
        formdata.append('pwd',$('#pwd').val());  //追加 pwd: **

        $.ajax({
            url:'/file_upload/',
            type:'post',

            //ajax上传文件时，必备参数
            processData:false, //不处理数据
            contentType:false, //不设置内容类型

            data:formdata,
            success:function (response) {
                console.log(response) //打印响应内容
                $('.message').html('文件上传成功!').css('color','blue')
            }
        })
    })
</script>
</body>

views.py和上面 form表单，上传文件的视图函数一样。

 　　

 

以上两种文件上传的方式，Content-Type 类型都是: multipart/form-data

 

 

 

=====

posted @ 2020-01-14 14:26  风语9191  阅读(530)  评论(0)    收藏  举报