JQuery ajax 上传
Posted Sun_先生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery ajax 上传相关的知识，希望对你有一定的参考价值。
上传数据
发送
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax</title> </head> <body> <form> <label for="username">账号</label> <input id="username" type="text"> <label for="password">密码</label> <input id="password" type="password"> </form> <button class="btn">提交</button> <script src="/static/jquery.js"></script> <script> $(\'.btn\').click(function () { var username = $(\'#username\').val(); var password = $(\'#password\').val(); $.ajax({ url:\'/info\', type:\'post\', data:{\'username\':username,\'password\':password}, success:function () { alert(\'成功\') }, error:function () { alert(\'失败\') } }) }) </script> </body> </html>
接收
from django.shortcuts import render # Create your views here. def index(request): return render(request,\'index.html\') def info(request): if request.method == "POST": print(request.POST) return render(request,\'info.html\')
结果
上传文件
发送
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax</title> </head> <body> <form id="form-upload" enctype="multipart/form-data"> <input id="picture" type="file" name="picture"> <!-- 上传多文件，添加multiple --> <!-- <input id="picture" type="file" name="picture" multiple="multiple"> --> </form> <button class="btn">上传</button> <script src="/static/jquery.js"></script> <script> $(\'.btn\').click(function () { var formData = new FormData(); // 可以传一个form var picture = $(\'#picture\')[0].files[0]; // 获取文件对象 formData.append(\'picture\',picture); // 图片 formData.append(\'name\',\'kidd\'); // 字符串 $.ajax({ url:\'/upload\', type:\'post\', data:formData, cache: false, processData: false, // 告诉jQuery不要去处理发送的数据 contentType : false, // 告诉jQuery不要去设置Content-Type请求头 success:function () { alert(\'成功\') }, error:function () { alert(\'失败\') } }) }) </script> </body> </html>
接收
from django.shortcuts import render,HttpResponse def upload(request): if request.method == \'GET\': return render(request,\'upload.html\') if request.method == "POST": name = request.POST.get(\'name\') picture = request.FILES.get(\'picture\') if picture: path = \'static/%s\'%picture.name with open(path,\'wb\') as f: for chunk in picture.chunks(): # 文件小的话，可以直接读取，使用read() f.write(chunk) return HttpResponse(\'\')
注意
let fo = document.queryselect(\'form\') let formData = new FormData(fo) console.log(formData) //这样输出，formData里面是没有数据的
以为在控制台中访问不到formData的数据，你在控制台看到的是FormData原型，存储的数据没有以对象属性的方式体现，可以理解为类的私有字段，外界访问不到，但是你可以通过formData.get("name")的方式获取到对应的表单数据。
还有千万不要写错字，例如：formData。如果报错文件是发不出去的。以上是关于JQuery ajax 上传的主要内容，如果未能解决你的问题，请参考以下文章