标签：html set lse gif post doc formdata BMI idt
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .upload { display: inline-block; background-color: #ef4300; cursor: pointer; width: 100px; height: 35px; text-align: center; position: absolute; line-height: 35px; top: 0; bottom: 0; right: 0; left: 0; z-index: 99; } .file { width: 100px; height: 35px; text-align: center; position: absolute; line-height: 35px; top: 0; bottom: 0; right: 0; left: 0; z-index: 100; opacity: 0; } </style> </head> <body> <div style="position: relative;width: 100px;height: 35px"> <input type="file" id="i1" name="upload" class="file"> <a class="upload">上传</a> </div> <input type="submit" value="xhr提交" onclick="xhrSubmit();"> <input type="submit" value="ajax提交" onclick="ajaxSubmit();"> <script src="/static/jquery-1.12.4.js"></script> <script src="/static/jquery.cookie.js"></script> <form action="/xiaoqing/upload_file/" method="post" target="ifm1" enctype="multipart/form-data"> {% csrf_token %} <iframe id="ifm2" name="ifm1"></iframe> <input type="file" name="upload"> <input type="submit" onclick="iframesubmitForm();" value="Form提交" > </form> <script> var csrftoken = $.cookie(‘csrftoken‘); //第一种上传方式 iframe function iframesubmitForm() { $(‘#ifm2‘).load(function(){ var text= $(‘#ifm2‘).contents().find(‘body‘).text(); var obj= JSON.parse(text); console.log(obj); }) } //第二种上传方法 ajax function ajaxSubmit() { var fileobj = document.getElementById(‘i1‘).files[0]; console.log(fileobj); var fd = new FormData(); //依赖FormData对象 fd.append(‘username‘, ‘root‘); fd.append(‘upload‘, fileobj); $.ajax({ url: ‘/xiaoqing/upload_file/‘, type: ‘POST‘, data: fd, processData: false, cententType: false, headers: {‘X-CSRFtoken‘: csrftoken}, success: function(arg,a1,a2){ console.log(arg); console.log(a1); console.log(a2); } }) } //第三种上传方法 xhr对象 function xhrSubmit() { var fileobj = document.getElementById(‘i1‘).files[0]; console.log(fileobj); var fd = new FormData(); //依赖FormData对象 fd.append(‘username‘,‘root‘); fd.append(‘upload‘,fileobj); var xhr= new XMLHttpRequest(); //创建对象 xhr.open(‘POST‘,‘/xiaoqing/upload_file/‘,true); xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded; charset-UTF-8‘); //POST请求必须设置 xhr.setRequestHeader(‘X-CSRFtoken‘,csrftoken); xhr.send(fd); xhr.onreadystatechange = function() { if(xhr.readyState == 4){ var obj = JSON.parse(xhr.responseText); //返回值 console.log(obj); } } } </script> </body> </html>
def upload(request): return render(request,‘upload.html‘) def upload_file(request): username=request.POST.get(‘username‘) upload_obj=request.FILES.get(‘upload‘) print(upload_obj) print(username) import os upload_path=os.path.join(‘uploads‘,upload_obj.name) with open(upload_path,‘wb+‘) as f: for item in upload_obj.chunks(): f.write(item) ret = {‘status‘:True,‘data‘:request.POST.get(‘username‘)} return HttpResponse(json.dumps(ret))
标签：html set lse gif post doc formdata BMI idt
原文地址：https://www.cnblogs.com/sunhao96/p/9025704.html
