python保存html ajax_python原生Ajax 文件上传

原生Ajax文件上传，如果没有定义

 文件上传依赖JS FormData 对象

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

html 文件上传框

var fileobj = doucument.getElementById('file').files[0]

注意：获取上传的文件为 xx.files[0]

2、创建Form 表单

var form =  new FormData()

注意 ; js 创建 FormData 对象后，无需再创建 html标签

3、表单中添加文件信息

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

完整demo

html

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) // 发送数据，请求中包含 文件

}

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')

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