Django 文件上传

三种文件上传方式：

a. Form表单上传，页面刷新

b. ajax方式(低版本浏览器不支持FormData())：

    $(function () {
        $(\'#btn1\').click(function () {
            var fm = new FormData();
            fm.append(\'fffff\', document.getElementById(\'ggggg\').files[0]);
            fm.append(\'usernmae\',\'root\');
            
            $.ajax({
                url: "/ajax-upload/",
                type: \'POST\',
                data: fm,
                processData: false,  // tell jQuery not to process the data
                contentType: false,  // tell jQuery not to set contentType
                success:function (arg) {
                    console.log(arg);
                }
            })
        })
    })

View Code

c. "伪"Ajax操作（iframe + Form表单）

　　iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

1、iframe onload

　　onload事件会在页面或图像加载完成后立即发生

2、contents

　　contents() 函数的返回值为jQuery类型，返回一个新的jQuery对象，该对象包含了当前jQuery对象匹配元素的所有子节点(包括元素、文本、注释等所有类型的节点)。只要两个HTML标记之间存在任何空白字符(空格、换行符等)，就会被视作文本节点。如果元素是一个<iframe>，则选取该文档的所有文档节点。

<body>
    <h1>Form上传文件</h1>
    <form action="/upload/" method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <input  type="file" name="fffff"/>
        <input type="submit" value="提交" />
    </form>
    
    <h1>Ajax上传文件</h1>
    <input  type="file" id="ggggg"/>
    <a id="btn1">提交</a>
    
    <h1>"伪"Ajax操作</h1>
    <form id="ff1" action="/ajax-upload/" method="POST" enctype="multipart/form-data" target="ifr">
        {% csrf_token %}
        <input  type="file" name="fffff" onchange="changeImg();"/>
    </form>
    <iframe id="ifr" name="ifr" onload="successBack();"  style="display: none"></iframe>
    <div id="prevImg"></div>

    
    =========================================
    <script src="/static/jquery.js"></script>
    <script>
        $(function () {
            $(\'#btn1\').click(function () {
                var fm = new FormData();
                fm.append(\'fffff\', document.getElementById(\'ggggg\').files[0]);
                $.ajax({
                    url: "/ajax-upload/",
                    type: \'POST\',
                    data: fm,
                    processData: false,  // tell jQuery not to process the data
                    contentType: false,  // tell jQuery not to set contentType
                    success:function (arg) {
                        console.log(arg);
                    }
                })
            })
        });
        function successBack() {
            var v = $(\'#ifr\').contents().find(\'body\').html();
            var obj = JSON.parse(v);

            var tag = document.createElement(\'img\');
            tag.src = "/" + obj.data;

            $(\'#prevImg\').append(tag);

        }
        function changeImg() {
            document.getElementById(\'ff1\').submit();
        }
    </script>
</body>

文件上传HTML代码