利用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)