Django框架学习笔记（28.文件上传详解）

最新推荐文章于 2023-08-16 11:40:59 发布

__XYQ

最新推荐文章于 2023-08-16 11:40:59 发布

阅读量343

点赞数

分类专栏： Django框架文章标签： django 前端

本文链接：https://blog.youkuaiyun.com/qq_41144008/article/details/78879916

版权

Django框架专栏收录该内容

29 篇文章

订阅专栏

1.所有美观的上传按钮原理：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .upload {
            display: inline-block;
            padding: 10px;
            background-color: aqua;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 90;
        }

        .file {
            width: 100px;
            height: 50px;
            opacity: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 100;
        }
    </style>
</head>
<body>
<div style="position:relative; width: 100px; height: 50px">
    <input class="file" type="file" id="666" name="2333"/>
    <a class="upload">上传</a>
</div>
</body>
</html>

jQuery的文件上传：

<body>
<div style="position:relative; width: 100px; height: 50px">
    <input class="file" type="file" id="f666" name="2333"/>
    <a class="upload">上传</a>
</div>
<input type="button" value="提交jQuery" οnclick="jqSubmit();"/>
<script src="/static/jquery-1.12.4.js"></script>
<script>
    function jqSubmit() {
        // $('#fafafa')[0]
        var file_obj = document.getElementById('f666').files[0];

        var fd = new FormData();
        fd.append('username', 'root');
        fd.append('f666', file_obj);

        $.ajax({
            url: '/upload_file/',
            type: 'POST',
            data: fd,
            processData: false,  // tell jQuery not to process the data
            contentType: false,  // tell jQuery not to set contentType
            success: function () {}
        })
    }

</script>
</body>

views.py:

def upload(request):
    return render(request, 'upload.html')
from django.views.decorators.csrf import csrf_exempt, csrf_protect
@csrf_exempt
def upload_file(request):
    username = request.POST.get('username')
    f666 = request.FILES.get('f666')
    with open(f666.name, 'wb') as f:
        for item in f666.chunks():
            f.write(item)

    return HttpResponse('OK')

XHR方式上传文件：

<script>
function xhrSubmit(){
            var file_obj = document.getElementById('f666').files[0];
            var fd = new FormData();
            fd.append('username','root');
            fd.append('f666',file_obj);
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/upload_file/',true);
            xhr.send(fd);
        }

</script>

IFRAME方式上传：

<body>
<form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
    <iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
    <input type="file" name="f666" οnchange="changeUpalod();"/>
    <input type="submit" οnclick="iframeSubmit();" value="Form提交"/>
</form>
<script>
</script>
</body>

上传文件预览：

views.py:

from django.views.decorators.csrf import csrf_exempt, csrf_protect
import json
import os
@csrf_exempt
def upload_file(request):
    f666 = request.FILES.get('f666')
    img_path = os.path.join('static/imgs/', f666.name)
    with open(img_path, 'wb') as f:
        for item in f666.chunks():
            f.write(item)
    ret = {'data': img_path}
    return HttpResponse(json.dumps(ret))

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
    <iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
    <input type="file" name="f666" οnchange="changeUpalod();"/>
    <input type="submit" οnclick="iframeSubmit();" value="提交"/>
</form>
<div id="preview"></div>
<script src="/static/jquery-1.12.4.js"></script>
<script>
    function iframeSubmit() {
        $('#ifm1').load(function () {
            var text = $('#ifm1').contents().find('body').text();
            var obj = JSON.parse(text);
            $('#preview').empty();
            var imgTag = document.createElement('img');
            imgTag.src = "/" + obj.data;
            $('#preview').append(imgTag);
        })
    }
</script>
</body>
</html>

上面的预览要上传后才可以，下面这个只要选择图片后就可以预览：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
    <iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
    <input type="file" name="f666" οnchange="changeUpload();"/>
    <input type="submit" οnclick="iframeSubmit();" value="提交"/>
</form>
<div id="preview"></div>
<script src="/static/jquery-1.12.4.js"></script>
<script>
    function changeUpload() {
        $('#ifm1').load(function () {
            var text = $('#ifm1').contents().find('body').text();
            var obj = JSON.parse(text);
            $('#preview').empty();
            var imgTag = document.createElement('img');
            imgTag.src = "/" + obj.data;
            $('#preview').append(imgTag);
        });
        $('#form1').submit();
    }


    function iframeSubmit() {
        $('#ifm1').load(function () {
            var text = $('#ifm1').contents().find('body').text();
            var obj = JSON.parse(text);
            $('#preview').empty();
            var imgTag = document.createElement('img');
            imgTag.src = "/" + obj.data;
            $('#preview').append(imgTag);
        })
    }
</script>
</body>
</html>