上一篇：Django之Ajax(jQuery)and原生Ajax(XMLhttpRequest)）【交互篇五】https://blog.csdn.net/Burgess_zheng/article/details/86548396
下一篇：Django之JSONP跨域请求【交互篇七】 https://blog.csdn.net/Burgess_zheng/article/details/86558947
目录
前端文件上传几种方式
文件上传四种方式
- Form提交 跳转：https://blog.csdn.net/Burgess_zheng/article/details/86539836
- Ajax上传文件两种方式（1.原生ajax（XMLHttpRequest()对象方式），2.jquery ajax方式）
- iframe上传文件
时机：如果发送的是【文件】-> iframe-->jQuery(FormData)-->XMLHttpRequest(FormData)，
Ajax上传文件两种方式和iframe上传方式
实战Django之ajax两种上传方式和iframe上传方式： https://blog.csdn.net/Burgess_zheng/article/details/86558918
对ajax（jQuery,原生XMLhttpRequest）、iframe、CSRF不熟悉请先跳转到如下文章:
Django之Ajax(jQuery)and原生Ajax(XMLhttpRequest)）【交互篇五】 https://blog.csdn.net/Burgess_zheng/article/details/86548396
实战Django之Ajax（jQuery）前后端交互 https://blog.csdn.net/Burgess_zheng/article/details/86548407
实战Django之iframe介绍和交互 https://blog.csdn.net/Burgess_zheng/article/details/86558181
Django之CSRF XSS原理解析【交互篇四】https://blog.csdn.net/Burgess_zheng/article/details/86548425
后端
def upload(request): if request.method == "GET": return render(request, 'upload.html') elif request.method == "POST": username = request.POST.get('username') file_obj = request.FILES.get('fafafa') import os img_path = os.path.join('static/imgs/',file_obj.name) #手动在static下创建一个imags目录 #其实这里我们可以进行判断该imgs目录是否存在，不存在就创建 with open(img_path,'wb') as f: #文件保存到指定路径 for item in file_obj.chunks(): f.write(item) ret = {'code': True , 'data': img_path} #文件路径返回给前端 import json return HttpResponse(json.dumps(ret))前端
1.原生ajax（XMLHttpRequest()对象方式）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a id="csrf" style="display: none">{{ csrf_token }}</a> <input type="file" id="fafafa" name="afafaf" /> <input type="button" value="提交XHR" onclick="xhrSubmit()" /> <script type="text/javascript" src="/static/jquery-1.12.4.js"></script> <script> function xhrSubmit(){ // $('#fafafa')[0] //获取dom对象 console.log(1111111111111); var file_obj = document.getElementById('fafafa').files[0]; //匹配上传文件标签.files[0]：已上传文件对象 var fd = new FormData(); //相当一个form表单（和字典一样） fd.append('username','root'); //追加key和value,value可为字符串也可以是对象 fd.append('fafafa',file_obj); var xhr = new XMLHttpRequest(); //创建一个XMLHttpRequest对象 xhr.open('POST', '/submit/upload/',true); //创建请求 xhr.onreadystatechange = function(){ //当readyState的值改变时自动触发执行其对应的函数（回调函数） if(xhr.readyState == 4){ /* Number readyState 状态值（整数） 详细： 0-未初始化，尚未调用open()方法； 1-启动，调用了open()方法，未调用send()方法； 2-发送，已经调用了send()方法，未接收到响应； 3-接收，已经接收到部分响应数据； 4-完成，已经接收到全部响应数据； */ // 接收完毕 var obj = JSON.parse(xhr.responseText);//反序列化响应数据 console.log(obj); } }; xhr.setRequestHeader('X-CSRFtoken',$('#csrf').text()); //添加头部信息 xhr.send(fd);//发送请求 } </script> </body> </html>2.jquery ajax方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a id="csrf" style="display: none">{{ csrf_token }}</a> <input type="file" id="fafafa" name="afafaf" /> <input type="button" value="提交jQuery" onclick="jqSubmit()" /> <script type="text/javascript" src="/static/jquery-1.12.4.js"></script> <script> function jqSubmit(){ // $('#fafafa')[0] console.log(1111111111111); var file_obj = document.getElementById('fafafa').files[0]; var fd = new FormData();//相当一个form表单（和字典一样） fd.append('username','root');//追加key和value,value可为字符串也可以是对象 fd.append('fafafa',file_obj); $.ajax({ url: '/submit/upload/', type: 'POST', data: fd, headers:{'X-CSRFtoken':$('#csrf').text()}, processData: false, // tell jQuery not to process the data contentType: false, // tell jQuery not to set contentType success:function(arg,a1,a2){ console.log(arg); console.log(a1); console.log(a2); } }) } </script> </body> </html>3.iframe方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form id="form1" action="/submit/upload/" method="POST" enctype="multipart/form-data" target="ifm1"> {% csrf_token %} <iframe id="ifm1" name="ifm1" style="display: none;"></iframe> <input type="file" name="fafafa" onchange="changeUpalod();" /> <!--检测到有文件上传就触发指定函数,所以我们就无需弄个提交标签--> <!--<input type="submit" onclick="iframeSubmit();" value="Form提交"/>--> </form> <div id="preview"></div> <script type="text/javascript" src="/static/jquery-1.12.4.js"></script> <script> function changeUpalod(){ //检测到有上传文件触发该函数 //匹配的iframe绑定一个load事件 //当接收到后台响应信息的时候会触发该事件函数 //下面这种绑定形式和 <iframe id="ifm1" name="ifm1" onload='func()'></iframe>一样的 $('#ifm1').load(function(){ var text = $('#ifm1').contents().find('body').text(); //获取ifml嵌套html里面的body下的内容（后端的响应信息） var obj = JSON.parse(text); //反序列化响应数据 $('#preview').empty(); //清空匹配标签下的所有标签 var imgTag = document.createElement('img'); //创建一个img标签 imgTag.src = "/" + obj.data; //obj.data：后端返回文件或图片的路径进行拼接 //添加img标签的src内部属性值 //实现图片预览功能 $('#preview').append(imgTag); //追加到指定标签的下 }); $('#form1').submit(); } </script> </body> </html>结论：
两种AJAX提交文件或者图片需要依赖FormData()
但是FormData()不是所有的浏览器都支持的，IE的低版本就不支持
所以上传文件优先选择iframe
上一篇：Django之Ajax(jQuery)and原生Ajax(XMLhttpRequest)）【交互篇五】https://blog.csdn.net/Burgess_zheng/article/details/86548396
下一篇：Django之JSONP跨域请求【交互篇七】 https://blog.csdn.net/Burgess_zheng/article/details/86558947