方法一：直接上传文件
>>>html <form action="/ajax/" method="POST" enctype="multipart/form-data"> <input type="text" name="user"> <input type="file" name="files"> <input type="submit" value="提交"> </form> >>>views def ajax(request): if request.method == 'GET': return render(request,'index.html',locals()) else: user =request.POST.get('user') img = request.FILES.get('files') print(img.name) print(img.size) f = open(img.name,'wb') for line in img.chunks(): f.write(line) f.close() return HttpResponse('ok')
思考：1.如何把难看的上传文件的按钮换成好看的按钮？(覆盖)
2.form组件上传文件？(可对文件进行验证)
方法二：1.jquery结合 formdata对象上传文件 2. 原生ajax结合 formdata对象上传文件 3.iframe + form 上传文件
>>>html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <input type="file" id="img"> <a class="btn" onclick="AjaxSubmit1()">上传</a> <a class="btn" onclick="AjaxSubmit2()">上传</a> </div> <div> <iframe id="iframe" name="ifra" style="display: none"></iframe> <form action="/ajax/" method="POST" id="fm" target="ifra" enctype="multipart/form-data"> <input type="text" name="k1"> <input type="text" name="k2"> <input type="file" name="k3"> <a onclick="AjaxSubmit3()">提交</a> </form> </div> <script src="/static/js/jquery-3.3.1.js"></script> <script> function AjaxSubmit1() { var data = new FormData(); data.append('k1','v1'); data.append('k2','v2'); data.append('k3',document.getElementById('img').files[0]); $.ajax({ url:'/ajax/', type:'POST', data:data, success:function (arg) { console.log(arg) }, processData:false, contentType:false }) } function AjaxSubmit2() { var data = new FormData(); data.append('k1','v1'); data.append('k2','v2'); data.append('k3',document.getElementById('img').files[0]); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if(xhr.readyState == 4){ console.log(xhr.responseText); } }; xhr.open('POST','/ajax/'); xhr.send(data); } function AjaxSubmit3() { document.getElementById('iframe').onload = reload1; document.getElementById('fm').submit() } function reload1() { var content = this.contentWindow.document.body.innerHTML; var obj =JSON.parse(content); console.log(obj) } </script> </body> </html> >>>views def ajax(request): print(request.POST) print(request.GET) print(request.FILES) ret = {'status':True,'message':'....'} import json return HttpResponse(json.dumps(ret))
文件预览：
>>>html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <iframe id="iframe" name="ifra" style="display: none"></iframe> <form action="/ajax/" method="POST" id="fm" target="ifra" enctype="multipart/form-data"> <input type="file" name="k3" onchange="uploadfile()"> </form> </div> <h3>预览</h3> <div> <div id="preval"></div> </div> <script src="/static/js/jquery-3.3.1.js"></script> <script> function uploadfile() { document.getElementById('iframe').onload = reload; document.getElementById('fm').submit() } function reload() { var content = this.contentWindow.document.body.innerHTML; var obj =JSON.parse(content); var tag = document.createElement('img'); tag.src = "/"+obj.data; $("#preval").empty().append(tag); } </script> </body> </html> >>>views import json import os import uuid def ajax(request): nid = str(uuid.uuid4()) ret = {'status':True,'data':None,'message':None} obj = request.FILES.get('k3') file_path = os.path.join('static',nid+obj.name) f = open(file_path,'wb') for line in obj.chunks(): f.write(line) f.close() ret['data']= file_path return HttpResponse(json.dumps(ret))