1、普通上传
<body>
<form action="/upload.html" method="post" enctype="multipart/form-data">
{% csrf_token %}
<input type="text" name="user"/>
<input type="file" name="img"/>
<input type="submit" value="提交"/>
</form>
</body>
后台保存文件
def upload(request):
if request.method=='GET':
return render(request,'upload.html')
else:
# obj=UploadForm(request.POST,request.FILES)
# if obj.is_valid():
# user=obj.cleaned_data['user']
# img=obj.cleaned_data['img']
user=request.POST.get('user')
img=request.FILES.get('img')
f = open(img.name,'wb')
for line in img.chunks():
f.write(line)
f.close()
return HttpResponse('OK')
2、页面上传按钮自定义
<input type="file" /> 生成了页面中“选择文件”的按钮样式无法修改。
设置style="opacity : 0”可以把它隐藏，同时仍然可以点击；
添加一个a标签，将它和“选择文件”按钮放在一个div中；
设置文件input框为绝对定位；这样a标签和文件input 就放在一起了
<body>
<form action="/upload.html" method="post" enctype="multipart/form-data">
{% csrf_token %}
<input type="text" name="user"/>
<div style="position: relative">
<a href="#">nb上传</a>
<input type="file" name="img" style="opacity: 0.2;position:absolute;top:0;left:0;"/>
</div>
<input type="submit" value="提交"/>
</form>
</body>
3、后端：基于Form对象处理数据
from django.forms import fields
class UploadForm(forms.Form):
user=fields.CharField()
img=fields.FileField()
def upload(request):
if request.method=='GET':
return render(request,'upload.html')
else:
obj=UploadForm(request.POST,request.FILES)
if obj.is_valid():
user=obj.cleaned_data['user']
img=obj.cleaned_data['img']
f = open(img.name,'wb')
for line in img.chunks():
f.write(line)
f.close()
return HttpResponse('OK')
4、ajax文件上传
function AjaxSubmit6(){
// document.getElementById('img').files[0] 获取已选择的文件对象
var data = new FormData(); //使用FormData来POST时，不需要设置请求头
data.append('k1','v1');
data.append('k2',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
})
}
function AjaxSubmit7(){
var xhr = new XMLHttpRequest();
// send之前设置回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState == 4){
// 接受完毕服务器返回的数据
console.log(xhr.responseText);
}
};
var data = new FormData();
data.append('k1','v1');
data.append('k2',document.getElementById('img').files[0]);
xhr.open('POST','/ajax1.html');
xhr.send(data);
}
5、基于Iframe+Form上传文件
添加一个隐藏的iframe元素，将form的target=iframe的name，这样form表单提交数据就会通过iframe来提交；
设置文件的input元素属性onchange，选择了文件就会调用onchange的函数，从而让iframe绑定onload函数，并提交数据；
后台保存文件成功后将文件路径返回给页面，iframe加载到数据会调用onload函数，将文件（图片）路径拿到，创建img元素来展示，从而实现预览。
<body>
<div>
<h6>基于Iframe+Form上传文件</h6>
<iframe style="display: none;" id="iframe1" name="ifra1"></iframe>
<form id="fm1" action="/upload_img.html" method="post" enctype="multipart/form-data" target="ifra1">
<input type="file" name="k1" onchange="uploadFile();"/>
</form>
<h3>预览</h3>
<div id="previews">
</div>
</div>
<script src="/static/jquery-3.1.1.js"></script>
<script>
function reloadIframe1() {
var ret= this.contentWindow.document.body.innerHTML;
var obj = JSON.parse(ret);
console.log(obj.data);
var tag = document.createElement('img');
tag.src = obj.data;
$('#previews').empty().append(tag);
}
function uploadFile(){
document.getElementById('iframe1').onload = reloadIframe1;
document.getElementById('fm1').submit();
}
</script>
def upload_img(request):
import os
import uuid
nid = str(uuid.uuid4())
ret={'status':True,'data':None,'message':None}
obj=request.FILES.get('k1')
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))