主要内容：
一、文件长传的三种方式
二、简单预览功能实现
| 一、form表单上传 |
1.页面代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="{% url 'upload' %} " method="post" enctype="multipart/form-data"> {% csrf_token %} <input type="file" name="img"> <input type="submit"> </form> </body> </html>
2.后端view函数处理
def upload(request): if request.method=="GET": return render(request,'upload.html') elif request.method=="POST": res={"status":"success","code":999} img_obj=request.FILES.get('img')#获取文件对象 with open(os.path.join('static',img_obj.name),"wb") as f: for chunk in img_obj.chunks(chunk_size=1024): f.write(chunk) return HttpResponse(json.dumps(res))
| 二、利用Jquery中ajax+FormData实现上传文件 |
FormData使用方式：
- 创建一个空的FormData对象，然后再用append方法逐个增加键值对
var formdata = new FormData();
formdata.append("name","xx");
formdata.append("flie", filename);
- 取得form元素对象，将它作为参数传入FormData对象中。
var formOjb = document.getElementById("form");
var formdata = new FormData(formOjb );
- 利用form元素对象的getFormData方法生成它
var formobj = document.getElementById("form");
var formdata = formobj.fetFormData();
1.页面代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="{% url 'upload' %} " method="post" enctype="multipart/form-data"> {% csrf_token %} <input type="file" name="img"> </form> <span style="padding: 5px;color: royalblue" onclick="Jqajax();">jq上传</span> <script type="text/javascript" src="/static/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="/static/jquery.cookie.js"></script> <script> function Jqajax() { var file_obj=$('input[name="img"]')[0].files[0];//获取dom形式的文件对象 var form_obj=new FormData(); //创建formdata对象 form_obj.append('img',file_obj); //将文件对象加载formdata中 $.ajaxSetup({ //设置csrf_token beforeSend: function (xhr, settings) { xhr.setRequestHeader("X-CSRFToken", $.cookie("csrftoken")); } }); $.ajax({ type: 'POST', url: '{% url 'upload' %}', data: form_obj,//指明发送的文件对象 processData: false, // 告诉jquery要传输data对象 contentType: false, // 告诉jquery不需要增加请求头对于contentType的设置 success: function (data) { console.log(data) } }) } </script> </body> </html>
后端处理逻辑不变
| 三、基于iframe实现伪ajax文件上传 |
原理：iframe数据提交不刷新页面
好处：通过iframe的src属性进行上传功能，这样的好处不用依赖FormData对象，低版本浏览器可能不支持该对象。
前端页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="{% url 'upload' %}" method="post" target="iframe_1" enctype="multipart/form-data"> {% csrf_token %} <iframe style="display: none" id="iframe_1" name="iframe_1" src=""></iframe> <input type="file" name="img" /> <input type="submit" onclick="iframeSubmmit();" value="iframe上传"/> </form> <script type="text/javascript" src="/static/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="/static/jquery.cookie.js"></script> <script> function iframeSubmmit() { $('#iframe_1').load(function () {//用户获取上传成功以后的返回值 var text=$('#iframe_1').contents().find('body').text(); var obj=JSON.parse(text); console.log(obj) ; }) } </script> </body> </html>
后端处理逻辑一样
| 四、图片预览功能 |
原理：通过图片上传时候服务端返回文件路径，然后使用js设置a标签src属性实现预览功能
后端代码：
def upload(request): if request.method=="GET": return render(request,'upload.html') elif request.method=="POST": img_obj=request.FILES.get('img')#获取文件对象 file_path=os.path.join('static',img_obj.name) res={"status":"success","code":999,"file_path":file_path} with open(os.path.join(file_path,"wb") as f: for chunk in img_obj.chunks(chunk_size=1024): f.write(chunk) return HttpResponse(json.dumps(res))