Ajax发送、上传文件，Django后端接收、获取文件

html核心代码：

            <form id="form_id" method="post" enctype="multipart/form-data">
                <div class="modal-body">
                    <input type="file" id="upload_file" name="upload_file">
                </div>
            </form>

            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" id="fileSave" class="btn btn-primary" data-uri="{% url 'menus:upload' %}">保存
                </button>
            </div>

定义好form表单，定义好input上传文件的标签，注意enctype="multipart/form-data"

use multipart/form-data when your form includes any <input type="file"> elements

参考：https://stackoverflow.com/questions/4526273/what-does-enctype-multipart-form-data-mean

ajax核心代码：

    $(function () {
        $('#fileSave').click(function (e) {
            var _this = $(this);
            var uri = _this.data('uri');
            var formData = new FormData();
            formData.append('roster_file', $('input[type=file]')[0].files[0]);

            $.ajax({
                url: uri,
                data: formData,
                type: "POST",
                contentType: false,
                processData: false,
                success: function (resp) { 
                        window.location.reload();
                    
                },
                error: function (err) {
                       alert(”出错了“)                    
                    }
                }
            })
        });
    });

主要是通过formData对象来发送文件，注意 contentType: false,processData: false两个参数都要设置为false。

参考：

https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

https://segmentfault.com/a/1190000005831232

https://api.jquery.com/jquery.ajax/#jQuery-ajax-settings

django后端核心代码： 

class UploadView(JSONResponseMixin, View):
    def post(self, request, *args):
        roster_file = request.FILES.get('roster_file').read()

主要是通过request.FILES获取上传的文件对象，roster_file对应的是ajax代码部分formData中设置的文件名。

参考：

https://docs.djangoproject.com/en/2.2/topics/http/file-uploads/#basic-file-uploads

https://stackoverflow.com/questions/32655704/python-django-how-do-i-read-a-file-from-an-input-file-tag

https://www.cnblogs.com/linxiyue/p/4038436.html