利用ajax与input 上传与下载文件

html 部分代码

<form action="" method="" class="form form-horizontal" novalidate>
    <div class="form-group">
        <label for="avatar" class="text-center" id="route">
            点此选择文件<span id="files"></span>
        </label>
        <div class="">
            <input type="file" id="avatar">
        </div>
    </div>
    <div class="form-group">
        <input type="button" class="btn btn-primary" id="upload_btn" value="上传文件">
    </div>
</form>

script 脚本

<script>
    // 选择文件  change: 发生改变并失去焦点之后    这段代码似乎没啥用,但在上传图片文件时就用到了
    $('#avatar').change(function () {
        {#将js转化为jq#}
        file = this.files[0];
        {#console.log(file);#}
        // 将file解析为blob
        reader = new FileReader();
        reader.readAsText(file);  //读取文本内容
        reader.readAsDataURL(file);  //上传图片, 然后在下面利用attr,将src的值变为reader.result
        reader.onload = function () {
            
            $('#files').text(reader.result);
            console.log($('#files').text(reader.result));
         }
    });

    $('#upload_btn').click(function () {
        token = $('[name = csrfmiddlewaretoken]').val();
        {#console.log($('#avatar')[0].files[0].name); {# 文件名 # }#}
        {#console.log($('#avatar')[0].files[0].size); {# 文件大小 # }#}
        {#console.log($('#avatar').val());  {# 文件路径 # }#}
        key_value = $('.form').serializeArray();
        form_data = new FormData();
        avatar = $('#avatar')[0].files[0];
        console.log(avatar);
        if(avatar){
            form_data.append('avatar', avatar)
        }
        form_data.append('csrfmiddlewaretoken', token);
        form_data.append('filename', avatar.name);
        form_data.append('filesize', avatar.size);
        $.ajax({
            url: '/upload/',
            type: 'post',
            data: form_data,
            contentType: false,
            processData: false,
            success: function (data) {
                if (data.state == 0) {
                    location.reload()
                }
            }
        })
    })
</script>

<script>
    function download_action(data, id) {
        $('#myModal').modal('show');
        $('#download-sure').click(function () {
            {#let id = id;#}
            let url = data;
            $.ajax({
                url: '/' + url + '/' + id + '/',
                type: 'get',
                success: function (data) {
                    location.reload();
                    {# 刷新页面 #}
                }
            })
            $('#myModal').modal('hide');
        })
    }
</script>

后台

要使用 request.FILES  来获取文件内容

avatar = request.FILES.get('avatar', None)