Django 文件上传

最简单的文件上传

<form action="/upload/" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="text" name="user">
    <input type="file" name="img">
    #如果希望定制提交按钮等，可以将input框设置为透明度为0的，做好定位，用希望用的内容进行覆盖
    <div style="position: relative">
        <a >NB上传</a>
        <input type="file" name="img" style="opacity: 0;position:absolute;top:0;left: 0;">

    </div>
    <input type="submit" value="提交">
</form>

HTML

def upload(request):

    if request.method == 'GET':

        return render(request,'upload.html')
    else:

        user = request.POST.get('user')
        img = request.FILES.get('img')
        # img是一个对象（文件大小、文件名称、文件内容等。。。）

        print(img.name)
        print(img.size)

        f = open(img.name,'wb')
        # 获取文件内容，是从迭代器中一次一次获取
        for line in img.chunks():
            f.write(line)
        f.close()

        return HttpResponse('.....')

服务端

Ajax文件上传：

1、jquery方式

<body>
    <h3>4.文件上传</h3>
    <input type="file" id="img" />
    <a class="btn" onclick="AjaxSubmit6();">AjaxSubmit6上传</a>

<script>
            function AjaxSubmit6() {
            //document.getElementById('img')[0]
            var data = new FormData();
            data.append('k1','v1');
            data.append('k2','v2');
            data.append('k3',document.getElementById('img').files[0]);

            $.ajax({
                url: '/ajax1.html',
                type: 'POST',
                data:data,
                success:function (arg) {
                    console.log(arg)
                },
                 processData: false,  // tell jQuery not to process the data
                 contentType: false  // tell jQuery not to set contentType
            })
        }
</script>
</body>

HTML

2、原生方式

<body>
    <h3>4.文件上传</h3>
    <input type="file" id="img" />
    <a class="btn" onclick="AjaxSubmit7();">AjaxSubmit7上传</a>


<script>
        function AjaxSubmit7() {
            var data = new FormData();
            data.append('k1','v1');
            data.append('k2','v2');
            data.append('k3',document.getElementById('img').files[0]);

            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4){
                    // 接收完毕服务器返回的数据
                    console.log(xhr.responseText);

                }
            };
            xhr.open('POST','/ajax1.html');
            xhr.send(data);
        }
</script>
</body>

HTML

3、ifram方式

<body>
    <h3>4.文件上传</h3>
    <input type="file" id="img" />

    <iframe style="display: none" id="iframe1" name="ifra1"></iframe>
    <form id="fm1" action="/ajax1.html" method="POST" enctype="multipart/form-data" target="ifra1">
        <input type="text" name="k1" />
        <input type="text" name="k2" />
        <input type="file" name="k3" />
        <a onclick="AjaxSubmit8()">提交</a>
    </form>

<script>
        function AjaxSubmit8() {
            document.getElementById('iframe1').onload = reloadIframe1;
            document.getElementById('fm1').submit();
        }
        function reloadIframe1() {
            var content = this.contentWindow.document.body.innerHTML;
            var obj = JSON.parse(content);
            console.log(obj);
        }
</script>
</body>

HTML