python原生Ajax 文件上传

为什么80%的码农都做不了架构师？>>>   

原生Ajax文件上传，如果没有定义 <form entype=enctype="multipart/form-data"></form> 文件上传依赖JS FormData 对象

1、获取上传文件具体的对象

<input type="file" name="file" id="file">
html 文件上传框

var fileobj = doucument.getElementById('file').files[0]
注意：获取上传的文件为 xx.files[0]

2、创建Form 表单

var form =  new FormData()

注意 ; js 创建 FormData 对象后，无需再创建 <foem></form> html标签

3、表单中添加文件信息

form.append('file', fileobj)      #append(key,value) 相当于 name = 'file ' value =fileobj

完整demo

html

<input type="file" name="file" id="file">
<input type="submit" value="提交" onclick="ajaxupload()">

<script>
    function ajaxupload() {
        var xhr = new XMLHttpRequest();                            // 创建XMLHttpRequest 对象
        var fm = new FormData()                                    // 创建表单
        var file_obj = document.getElementById('file').files[0]    // 获取上传的文件对象
        console.log(file_obj)                                      // 打印文件对象
        fm.append('file',file_obj)                                //  将文件对象添加到form 里面
        xhr.open('post', '/upload/', true);                       //  创建post 请求
        xhr.onreadystatechange = function () {                    //  请求成功执行回调函数
            if (xhr.readyState == 4) {                            //  服务期返回 状态码 4的时候  
                console.log(xhr.responseText)                     //   打印服务器回调信息
            };
        };
        xhr.send(fm)                                              //   发送数据，请求中包含 文件
    }
</script>

views.py

def upload(request):
    if request.method =='GET':
        return render(request,'upload.html')
    if request.method == 'POST':
        file = request.FILES.get('file')              # 获取文件信息用 request.FILES.get
        print(file)                                   # 这里的get('file') 相当于 name = file
        # print(file) 可以直接显示文件名，是因为django FILES内部 重写了 __repr__ 方法 
        if file:                                      # 如果文件存在
            with open(file.name,'wb') as f:               #  新建1张图片 ，图片名称为 上传的文件名
                for temp in file.chunks():                #  往图片添加图片信息
                    f.write(temp)
        return HttpResponse('ok')

因为没有配置图片保存地址，所以直接上传到项目根路径

转载于:https://my.oschina.net/esdn/blog/915050