form表单与ajax多个文件的上传

基于form表单上传多个文件

新建路由

url(r'^mulfiles/',views.mulfiles,name='multi_files'),

html文件中内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="{% url 'multi_files' %}" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="text" name="username" placeholder="姓名">
    {# 注意这里要有multiple参数 #} 
    <input type="file" name="files" multiple>
    <input type="submit">
</form>

</body>
</html>

视图函数

def mulfiles(request):
    if request.method == 'POST':
        username = request.POST.get('username')
        # 通过request.FILES获取文件对象
        # 通过getlist方法获取多个文件
        obj_list = request.FILES.getlist('files')
        for obj in obj_list:
            # name与size属性～
            print('filename:',obj.name)
            print('filesize:',obj.size)
            # 文件存放的绝对路径
            filepath = os.path.join(settings.BASE_DIR,'staticfiles','upload',obj.name)
            with open(filepath,'wb')as f:
                for data in obj.chunks():
                    f.write(data)
        return HttpResponse('OK')

    elif request.method == 'GET':
        return render(request,'multifiles.html')

基于Ajax上传多个文件

新建路由

url(r'^ajax_files/$',views.ajax_files,name='ajaxfiles'),

html文件如下

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{# 注意必须用form标签 #}
<form id="upload">
    {# 需要将csrftoken标签加在form标签中 #}
    {% csrf_token %}
    {# 注意每一个input标签必须有name属性 #}
    <input type="text" name="user" placeholder="姓名">
    <input type="password" name="pwd" placeholder="密码">
    {# 注意多文件上传设置multiple参数 #}
    <input type="file" name="files" multiple>
    {# 这个提交的按钮不可以是submit也不可是纯button标签～因为它们会默认在再在当前页面自动提交一个get请求 #}
    <input type="button" id="btn" value="确认">
</form>
</body>
<script src="{% static 'jquery-3.4.1.js' %}"></script>
<script>

    $('#btn').click(function () {
        {# 注意这里newFormData对象时～将外层form标签的dom对象作为参数传进去 #}
        var formdata = new FormData($('#upload')[0]);

        $.ajax({
            url:'{% url "ajaxfiles" %}',
            type:'post',
            {# 直接将formdata当作参数传过去，加上下面的设置自动进行了csrftoken认证了 #}
            data:formdata,

            processData:false, //不处理数据
            contentType:false, //不设置内容类型
            success:function (data) {
                console.log(data);
                alert('上传成功！');
            }
        })
    })

</script>
</html>

视图函数

def ajax_files(request):
    if request.method == 'POST':
        #request.POST属性里放着user与pwd用户输入的值
        # <QueryDict: {'csrfmiddlewaretoken': ['YAD39hpTY5mKmgNpgkscCS03avYij1KAwvc2X4zLYolsSBUmyr2VBA7oHiI9lRAS'], 'user': ['whw'], 'pwd': ['123']}>
        # 我们想获取用户输入的数据可以在request.POST中获取
        print(request.POST)

        #request.FILES中放着我们上传的文件
        #<MultiValueDict: {'files': [<InMemoryUploadedFile: git常用命令.png (image/png)>, <InMemoryUploadedFile: readme模板.md (text/x-markdown)>]}>
        #上传文件的处理在request.FILES中处理
        print(request.FILES)
        ##通过getlist方法获取多个文件进行操作
        obj_list = request.FILES.getlist('files')
        for file in obj_list:
            # file.name获取文件名
            file_path = os.path.join(settings.BASE_DIR,'staticfiles','upload',file.name)
            # file.size获取文件大小～～这里也可以用上面的chunks()方法做～
            file_size = file.size
            with open(file_path,'wb')as f:
                while file_size > 1024:
                    data = file.read(1024)
                    f.write(data)
                    file_size -= 1024
                else:
                    data = file.read()
                    f.write(data)
        return HttpResponse('OK')
    else:
        return render(request,'ajax_files.html')

关于FormData可以参考这篇博客：https://blog.csdn.net/zqian1994/article/details/79635413

posted on 2019-05-30 23:36 江湖乄夜雨阅读(1256) 评论(0) 收藏举报