最简单的文件上传
<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>