Django 文件上传
最简单的文件上传
<form action="/upload/" method="POST" enctype="multipart/form-data"> {% csrf_token %} <input type="text" name="user"> <input type="file" name="img"> #如果希望定制提交按钮等,可以将input框设置为透明度为0的,做好定位,用希望用的内容进行覆盖 <div style="position: relative"> <a >NB上传</a> <input type="file" name="img" style="opacity: 0;position:absolute;top:0;left: 0;"> </div> <input type="submit" value="提交"> </form>
def upload(request): if request.method == 'GET': return render(request,'upload.html') else: user = request.POST.get('user') img = request.FILES.get('img') # img是一个对象(文件大小、文件名称、文件内容等。。。) print(img.name) print(img.size) f = open(img.name,'wb') # 获取文件内容,是从迭代器中一次一次获取 for line in img.chunks(): f.write(line) f.close() return HttpResponse('.....')
Ajax文件上传:
1、jquery方式
<body> <h3>4.文件上传</h3> <input type="file" id="img" /> <a class="btn" onclick="AjaxSubmit6();">AjaxSubmit6上传</a> <script> function AjaxSubmit6() { //document.getElementById('img')[0] var data = new FormData(); data.append('k1','v1'); data.append('k2','v2'); data.append('k3',document.getElementById('img').files[0]); $.ajax({ url: '/ajax1.html', type: 'POST', data:data, success:function (arg) { console.log(arg) }, processData: false, // tell jQuery not to process the data contentType: false // tell jQuery not to set contentType }) } </script> </body>
2、原生方式
<body> <h3>4.文件上传</h3> <input type="file" id="img" /> <a class="btn" onclick="AjaxSubmit7();">AjaxSubmit7上传</a> <script> function AjaxSubmit7() { 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','/ajax1.html'); xhr.send(data); } </script> </body>
3、ifram方式
<body> <h3>4.文件上传</h3> <input type="file" id="img" /> <iframe style="display: none" id="iframe1" name="ifra1"></iframe> <form id="fm1" action="/ajax1.html" method="POST" enctype="multipart/form-data" target="ifra1"> <input type="text" name="k1" /> <input type="text" name="k2" /> <input type="file" name="k3" /> <a onclick="AjaxSubmit8()">提交</a> </form> <script> function AjaxSubmit8() { document.getElementById('iframe1').onload = reloadIframe1; document.getElementById('fm1').submit(); } function reloadIframe1() { var content = this.contentWindow.document.body.innerHTML; var obj = JSON.parse(content); console.log(obj); } </script> </body>