Day24-Ajax文件上传
一.
<input type="file" id="fafafa" name="afafaf"/> <input type="file"> 这个标签是改不了的，只能通过其他方式，对它进行修饰。
因为input 框太难看了，又无法设置样式。
可以把它设置成在最上面，并且透明度等于0，把我们写的样式放到下面。
此图是抽屉网址中的好看的上传按钮。
二. 程序粘贴
input 标签应该放在最上面。a标签应该在最下面。让input的透明度为0，这样就可以看到a标签了。
views.py
def upload(request):
return render(request,'upload.html')
upload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.upload{
display:inline-block;
padding:10px;
background-color:brown;
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
z-index:90;
}
.file{
width:100px;height:50px;opacity:0;
display:inline-block;
padding:10px;
background-color:brown;
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
z-index:100;
}
</style>
</head>
<body>
<div style="position:relative;width:100px;height:50px;">
<input class="file" type="file" id="fafafa" name="afafafa"/>
<a class="upload">上传</a>
</div>
</body>
</html>
最终的效果：
点击上传按钮的时候，就可以选择文件了。
三. 选择文件后提交，提交前首先得获取input值。
3.1 用原生的Ajax实现文件上传。 要依赖FormData对象。基于原生Ajax可以实现文件上传，不过要借助于 FormData 这个对象。
程序粘贴：
views.py
# 基于ModelForm方式来实现
from django.shortcuts import render,HttpResponse
from app01 import models
from django import forms
from django.forms import fields as Ffields
from django.forms import widgets as Fwidgets
def orm(request):
#models.UserGroup.objects.create(name='CEO')
#models.UserGroup.objects.create(name='CFO')
#models.UserGroup.objects.create(name='COO')
return HttpResponse('orm') class UserInfoModelForm(forms.ModelForm):
#自定义额外的字段，比如是否要保存一个月内免登陆。
is_remember=Ffields.CharField(
widget=Fwidgets.CheckboxInput()
)
class Meta:
model=models.UserInfo #指去哪个类里面去获取字段，以后也可以做增删改查。
fields='__all__' #代指的是所有的field字段
#fields=['username'] #还可以是一个列表，可以选择要展示哪几列,只展示username这一列
#exclude=['username'] #把username列排除在外了。
#labels={'username':'请填入用户名'}
#help_texts={'username':'请把你的名字写对'}
#widgets={'username':Fwidgets.Textarea(attrs={'class':'c1'})}
error_messages={
'__all__':{},
'email':{
'required':'邮箱不能为空',
'invalid':'邮箱格式错误',
}
}
#field_classes={'email':Ffields.URLField}
def clean_username(self):
old=self.cleaned_data['username']
return old class UserInfoForm(forms.Form):
username = Ffields.CharField(max_length=32)
email=Ffields.EmailField()
#user_type=fields.ForeignKey(to='UserType',to_field='id')
user_type=Ffields.ChoiceField(
choices=models.UserType.objects.values_list('id','caption')
) def __init__(self,*args,**kwargs):
super(UserInfoForm,self).__init__(*args,**kwargs)
self.fields['user_type'].choices=models.UserType.objects.values_list('id','caption') def index(request):
if request.method=='GET':
obj=UserInfoModelForm()
return render(request,'index.html',{'obj':obj})
elif request.method=='POST':
obj=UserInfoModelForm(request.POST)
if obj.is_valid():
#obj.save()#这个save实现的时候，其实内部包含了2个步骤。可以拆开。
instance=obj.save(False) #什么也没干
instance.save() #只会保存当前这个类，而不会保存manytomany
obj.save_m2m() #保存manytomany
#print(obj.is_valid())
#print(obj.cleaned_data)
#print(obj.errors.as_json())
return render(request, 'index.html', {'obj': obj}) def user_list(request):
li=models.UserInfo.objects.all().select_related('user_type') #先把userinfo中的数据取出来
return render(request,'user_list.html',{'li':li}) def user_edit(request,nid):
#获取当前id对应的用户信息
#显示用户已经存在的数据
if request.method=='GET':
user_obj=models.UserInfo.objects.filter(id=nid).first() #获取对象
mf=UserInfoModelForm(instance=user_obj) #帮咱们生成标签
return render(request, 'user_edit.html',{'mf':mf,'nid':nid})
elif request.method=='POST':
user_obj = models.UserInfo.objects.filter(id=nid).first() #获取对象
mf = UserInfoModelForm(request.POST,instance=user_obj) #instance传进来表示更新，不加的话表示新建了一条数据。
if mf.is_valid():
mf.save()
else:
print(mf.errors.as_json())
return render(request, 'user_edit.html', {'mf': mf, 'nid': nid}) def ajax(request):
return render(request,'ajax.html') def ajax_json(request):
import time
time.sleep(3)
print(request.POST)
ret={'code':True,'data':request.POST.get('username')} #字典
import json
return HttpResponse(json.dumps(ret),status=404,reason='Not Found') def upload(request):
return render(request,'upload.html') def upload_file(request):
print(request.method)
username=request.POST.get('username')
fafafa=request.FILES.get('fafafa')
print(username,fafafa)
with open(fafafa.name,'wb') as f:
for item in fafafa.chunks():
f.write(item) ret={'code':True,'data':request.POST.get('username')} #字典
import json
return HttpResponse(json.dumps(ret))
upload.html
var file_obj=document.getElementById('fafafa').files[0]; //你要上传的那个文件对象；如果是文本的话，可以用.value 或 .val
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.upload{
display:inline-block;
padding:10px;
background-color:brown;
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
z-index:90;
}
.file{
width:100px;height:50px;opacity:0;
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
z-index:100;
}
</style>
</head>
<body>
<div style="position:relative;width:100px;height:50px;">
<input class="file" type="file" id="fafafa" name="afafaf"/>
<a class="upload">上传</a>
</div>
<input type="button" value="提交XHR" onclick="xhrSubmit();"/>
<script>
function xhrSubmit(){
//$('#fafafa')[0]
var file_obj=document.getElementById('fafafa').files[0]; //你要上传的那个文件对象
var fd=new FormData();
fd.append('username','root'); 这里是字符串，上面是文件，没法直接发过去，所以需要引入一个新的FormData对象。
fd.append('fafafa',file_obj); 加普通值可以，加对象也可以。 var xhr=new XMLHttpRequest(); //为了兼容IE旧版本
xhr.open('POST','/upload_file/',true); //指定用什么形式发，发到哪里，是否异步(是)
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
//接收完毕，放到XMLHttprequest对象里面了
var obj=JSON.parse(xhr.responseText);
console.log(obj); //这就是我们要拿的返回值
}
};
xhr.send(fd); //发送的数据，字符串
}
</script>
</body>
</html>
Ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text"/>
<input type="button" value="Ajax1" onclick="Ajax1();"/> <!--
<input type="text" id="url"/>
<input type="button" value="发送iframe请求" onclick="iframeRequest();"/>
<iframe id="ifm" src="http://www.baidu.com"></iframe>
--> <form action="/ajax_json/" method="POST" target="ifm1">
<iframe id="ifm1" name="ifm1"></iframe>
<input type="text" name="username"/>
<input type="text" name="email"/>
<input type="submit" onclick="submitForm();" value="Form提交"/>
</form> <script type="text/javascript" src="/static/jquery-1.12.4.js"></script>
<script>
function getXHR(){
var xhr = null;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr; } function Ajax1(){
//var xhr=new XMLHttpRequest(); //创建XMLHttpRequest对象
var xhr=getXHR(); //为了兼容IE旧版本
xhr.open('POST','/ajax_json/',true); //指定用什么形式发，发到哪里，是否异步(是)
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
//接收完毕，放到XMLHttprequest对象里面了
var obj=JSON.parse(xhr.responseText);
console.log(obj); //这就是我们要拿的返回值
}
};
xhr.setRequestHeader('k1','v1'); //发送的时候带着请求头，csrf的时候用。
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
//设置请求头，判断发来的请求头里面，怎么样把数据打包的。这样后台就知道怎么样去解了。
xhr.send("name=root;pwd=123"); //发送的数据
} /*
function iframeRequest(){
var url=$('#url').val();
$('#ifm').attr('src',url);
}
*/ function submitForm(){
$('#ifm1').load(function(){
var text=$('#ifm1').contents().find('body').text();
var obj=JSON.parse(text);
})
} </script>
</body>
</html>
urls.py
from django.conf.urls import url
from django.contrib import admin
from app01 import views urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^index/', views.index),
url(r'^user_list/', views.user_list),
url(r'^edit-(\d+)/', views.user_edit),
url(r'^ajax/$', views.ajax),
url(r'^ajax_json/$', views.ajax_json),
url(r'^orm/', views.orm),
url(r'^upload/', views.upload),
url(r'^upload_file/', views.upload_file),
]
页面效果：
3.2，基于jQuery来实现文件上传。
以下这两句是告诉jquery，不用对我的数据做特殊的处理。
processData:false,// tell jQuery not to process the data
contentType:false,// tell jQuery not to set contentType 程序粘贴：
upload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.upload{
display:inline-block;
padding:10px;
background-color:brown;
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
z-index:90;
}
.file{
width:100px;height:50px;opacity:0;
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
z-index:100;
}
</style>
</head>
<body>
<div style="position:relative;width:100px;height:50px;">
<input class="file" type="file" id="fafafa" name="afafaf"/>
<a class="upload">上传</a>
</div>
<input type="button" value="提交XHR" onclick="xhrSubmit();"/>
<input type="button" value="提交jQuery" onclick="jqSubmit();"/> <script src="/static/jquery-1.12.4.js"></script>
<script>
function jqSubmit(){
//$('#fafafa')[0]
var file_obj=document.getElementById('fafafa').files[0]; //你要上传的那个文件对象
var fd=new FormData();
fd.append('username','root');
fd.append('fafafa',file_obj);
$.ajax({
url:/upload_file/,
type:'POST',
data:fd,
processData:false,// tell jQuery not to process the data
contentType:false,// tell jQuery not to set contentType
success:function(arg,a1,a2){
console.log(arg);
console.log(a1);
console.log(a2);
} })
} function xhrSubmit(){
//$('#fafafa')[0]
var file_obj=document.getElementById('fafafa').files[0]; //你要上传的那个文件对象
var fd=new FormData();
fd.append('username','root');
fd.append('fafafa',file_obj); var xhr=new XMLHttpRequest(); //为了兼容IE旧版本
xhr.open('POST','/upload_file/',true); //指定用什么形式发，发到哪里，是否异步(是)
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
//接收完毕，放到XMLHttprequest对象里面了
var obj=JSON.parse(xhr.responseText);
console.log(obj); //这就是我们要拿的返回值
}
};
xhr.send(fd); //发送的数据，字符串
}
</script>
</body>
</html>
页面效果：
3.3，用原生的Ajax和jQuery都实现了文件的上传，但是这两者都依赖于FormData （低版本的又不支持）
需要用iframe的方式提交（兼容所有的浏览器，最主要是兼容IE）。发数据有3种方式，上传文件也应该有3种方式。
程序粘贴：
views.py
# 基于ModelForm方式来实现
from django.shortcuts import render,HttpResponse
from app01 import models
from django import forms
from django.forms import fields as Ffields
from django.forms import widgets as Fwidgets
def orm(request):
#models.UserGroup.objects.create(name='CEO')
#models.UserGroup.objects.create(name='CFO')
#models.UserGroup.objects.create(name='COO')
return HttpResponse('orm') class UserInfoModelForm(forms.ModelForm):
#自定义额外的字段，比如是否要保存一个月内免登陆。
is_remember=Ffields.CharField(
widget=Fwidgets.CheckboxInput()
)
class Meta:
model=models.UserInfo #指去哪个类里面去获取字段，以后也可以做增删改查。
fields='__all__' #代指的是所有的field字段
#fields=['username'] #还可以是一个列表，可以选择要展示哪几列,只展示username这一列
#exclude=['username'] #把username列排除在外了。
#labels={'username':'请填入用户名'}
#help_texts={'username':'请把你的名字写对'}
#widgets={'username':Fwidgets.Textarea(attrs={'class':'c1'})}
error_messages={
'__all__':{},
'email':{
'required':'邮箱不能为空',
'invalid':'邮箱格式错误',
}
}
#field_classes={'email':Ffields.URLField}
def clean_username(self):
old=self.cleaned_data['username']
return old class UserInfoForm(forms.Form):
username = Ffields.CharField(max_length=32)
email=Ffields.EmailField()
#user_type=fields.ForeignKey(to='UserType',to_field='id')
user_type=Ffields.ChoiceField(
choices=models.UserType.objects.values_list('id','caption')
) def __init__(self,*args,**kwargs):
super(UserInfoForm,self).__init__(*args,**kwargs)
self.fields['user_type'].choices=models.UserType.objects.values_list('id','caption') def index(request):
if request.method=='GET':
obj=UserInfoModelForm()
return render(request,'index.html',{'obj':obj})
elif request.method=='POST':
obj=UserInfoModelForm(request.POST)
if obj.is_valid():
#obj.save()#这个save实现的时候，其实内部包含了2个步骤。可以拆开。
instance=obj.save(False) #什么也没干
instance.save() #只会保存当前这个类，而不会保存manytomany
obj.save_m2m() #保存manytomany
#print(obj.is_valid())
#print(obj.cleaned_data)
#print(obj.errors.as_json())
return render(request, 'index.html', {'obj': obj}) def user_list(request):
li=models.UserInfo.objects.all().select_related('user_type') #先把userinfo中的数据取出来
return render(request,'user_list.html',{'li':li}) def user_edit(request,nid):
#获取当前id对应的用户信息
#显示用户已经存在的数据
if request.method=='GET':
user_obj=models.UserInfo.objects.filter(id=nid).first() #获取对象
mf=UserInfoModelForm(instance=user_obj) #帮咱们生成标签
return render(request, 'user_edit.html',{'mf':mf,'nid':nid})
elif request.method=='POST':
user_obj = models.UserInfo.objects.filter(id=nid).first() #获取对象
mf = UserInfoModelForm(request.POST,instance=user_obj) #instance传进来表示更新，不加的话表示新建了一条数据。
if mf.is_valid():
mf.save()
else:
print(mf.errors.as_json())
return render(request, 'user_edit.html', {'mf': mf, 'nid': nid}) def ajax(request):
return render(request,'ajax.html') def ajax_json(request):
import time
time.sleep(3)
print(request.POST)
ret={'code':True,'data':request.POST.get('username')} #字典
import json
return HttpResponse(json.dumps(ret),status=404,reason='Not Found') def upload(request):
return render(request,'upload.html') def upload_file(request):
print(request.method)
username=request.POST.get('username')
fafafa=request.FILES.get('fafafa')
print(username,fafafa)
with open(fafafa.name,'wb') as f:
for item in fafafa.chunks():
f.write(item) ret={'code':True,'data':request.POST.get('username')} #字典
import json
return HttpResponse(json.dumps(ret))
ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text"/>
<input type="button" value="Ajax1" onclick="Ajax1();"/> <!--
<input type="text" id="url"/>
<input type="button" value="发送iframe请求" onclick="iframeRequest();"/>
<iframe id="ifm" src="http://www.baidu.com"></iframe>
--> <form action="/ajax_json/" method="POST" target="ifm1">
<iframe id="ifm1" name="ifm1"></iframe>
<input type="text" name="username"/>
<input type="text" name="email"/>
<input type="submit" onclick="submitForm();" value="Form提交"/>
</form> <script type="text/javascript" src="/static/jquery-1.12.4.js"></script>
<script>
function getXHR(){
var xhr = null;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr; } function Ajax1(){
//var xhr=new XMLHttpRequest(); //创建XMLHttpRequest对象
var xhr=getXHR(); //为了兼容IE旧版本
xhr.open('POST','/ajax_json/',true); //指定用什么形式发，发到哪里，是否异步(是)
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
//接收完毕，放到XMLHttprequest对象里面了
var obj=JSON.parse(xhr.responseText);
console.log(obj); //这就是我们要拿的返回值
}
};
xhr.setRequestHeader('k1','v1'); //发送的时候带着请求头，csrf的时候用。
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
//设置请求头，判断发来的请求头里面，怎么样把数据打包的。这样后台就知道怎么样去解了。
xhr.send("name=root;pwd=123"); //发送的数据
} /*
function iframeRequest(){
var url=$('#url').val();
$('#ifm').attr('src',url);
}
*/ function submitForm(){
$('#ifm1').load(function(){
var text=$('#ifm1').contents().find('body').text();
var obj=JSON.parse(text);
})
} </script>
</body>
</html>
upload.html
<iframe id="ifm1" name="ifm1" style="display:none;"></iframe> 不让用户看到iframe框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.upload{
display:inline-block;
padding:10px;
background-color:brown;
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
z-index:90;
}
.file{
width:100px;height:50px;opacity:0;
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
z-index:100;
}
</style>
</head>
<body>
<div style="position:relative;width:100px;height:50px;">
<input class="file" type="file" id="fafafa" name="afafaf"/>
<a class="upload">上传</a>
</div>
<input type="button" value="提交XHR" onclick="xhrSubmit();"/>
<input type="button" value="提交jQuery" onclick="jqSubmit();"/> <hr/>
<form action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
<iframe id="ifm1" name="ifm1" style="display:none;"></iframe>
<input type="file" name="fafafa"/>
<input type="submit" onclick="iframeSubmit();" value="Form提交"/>
</form> <script src="/static/jquery-1.12.4.js"></script>
<script>
function jqSubmit(){
//$('#fafafa')[0]
var file_obj=document.getElementById('fafafa').files[0]; //你要上传的那个文件对象
var fd=new FormData();
fd.append('username','root');
fd.append('fafafa',file_obj);
$.ajax({
url:/upload_file/,
type:'POST',
data:fd,
processData:false,// tell jQuery not to process the data
contentType:false,// tell jQuery not to set contentType
success:function(arg,a1,a2){
console.log(arg);
console.log(a1);
console.log(a2);
}
})
} function xhrSubmit(){
//$('#fafafa')[0]
var file_obj=document.getElementById('fafafa').files[0]; //你要上传的那个文件对象
var fd=new FormData();
fd.append('username','root');
fd.append('fafafa',file_obj); var xhr=new XMLHttpRequest(); //为了兼容IE旧版本
xhr.open('POST','/upload_file/',true); //指定用什么形式发，发到哪里，是否异步(是)
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
//接收完毕，放到XMLHttprequest对象里面了
var obj=JSON.parse(xhr.responseText);
console.log(obj); //这就是我们要拿的返回值
}
};
xhr.send(fd); //发送的数据，字符串
} function iframeSubmit(){
$('#ifm1').load(function(){
var text=$('#ifm1').contents().find('body').text();
var obj=JSON.parse(text);
console.log(obj);
})
}
</script>
</body>
</html>
urls.py
from django.conf.urls import url
from django.contrib import admin
from app01 import views urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^index/', views.index),
url(r'^user_list/', views.user_list),
url(r'^edit-(\d+)/', views.user_edit),
url(r'^ajax/$', views.ajax),
url(r'^ajax_json/$', views.ajax_json),
url(r'^orm/', views.orm),
url(r'^upload/', views.upload),
url(r'^upload_file/', views.upload_file),
]
经测验，也可以成功上传。
四，时机选择
如果往后台发送的是普通数据-->jQuery, XMLHttpRequest, iframe
如果往后台发送的是文件--->iframe(不做任何依赖), jQuery（依赖于FormData）, XMLHttpRequest（依赖于FormData）。
五，如果上传的是图片，则需要有预览功能
把图片上传到static/imgs文件夹下，
img_path=os.path.join('static/imgs',fafafa.name) 让imgs路径与fafafa.name路径做个拼接。
ret = {'code': True, 'data':img_path} data返回的时候直接把路径返回。
上传成功的图片可以通过静态文件（路径）访问一下。可以在页面上添加一个“div”标签， class=preview，绑定到Form提交上，让img的src指向这个静态路径。
views.py
def upload(request):
return render(request,'upload.html') def upload_file(request):
print(request.method)
username=request.POST.get('username')
fafafa=request.FILES.get('fafafa')
import os
img_path=os.path.join('static/imgs',fafafa.name)
with open(img_path,'wb') as f:
for item in fafafa.chunks():
f.write(item)
ret = {'code': True, 'data':img_path}
#ret={'code':True,'data':request.POST.get('username')} #字典
import json
return HttpResponse(json.dumps(ret))
页面效果：
然后通过静态文件访问一下图片所在的URL
在页面上添加一个image标签，src=刚才图片所在路径就可以了。
$('#preview').empty(); 如果原来有，则先清空一下。
粘贴程序：
upload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.upload{
display:inline-block;
padding:10px;
background-color:brown;
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
z-index:90;
}
.file{
width:100px;height:50px;opacity:0;
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
z-index:100;
}
</style>
</head>
<body>
<div style="position:relative;width:100px;height:50px;">
<input class="file" type="file" id="fafafa" name="afafaf"/>
<a class="upload">上传</a>
</div>
<input type="button" value="提交XHR" onclick="xhrSubmit();"/>
<input type="button" value="提交jQuery" onclick="jqSubmit();"/> <hr/>
<form action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
<iframe id="ifm1" name="ifm1" style="display:none;"></iframe>
<input type="file" name="fafafa"/>
<input type="submit" onclick="iframeSubmit();" value="Form提交"/>
</form> <div id="preview"></div> <script src="/static/jquery-1.12.4.js"></script>
<script>
function jqSubmit(){
//$('#fafafa')[0]
var file_obj=document.getElementById('fafafa').files[0]; //你要上传的那个文件对象
var fd=new FormData();
fd.append('username','root');
fd.append('fafafa',file_obj);
$.ajax({
url:/upload_file/,
type:'POST',
data:fd,
processData:false,// tell jQuery not to process the data
contentType:false,// tell jQuery not to set contentType
success:function(arg,a1,a2){
console.log(arg);
console.log(a1);
console.log(a2);
}
})
} function xhrSubmit(){
//$('#fafafa')[0]
var file_obj=document.getElementById('fafafa').files[0]; //你要上传的那个文件对象
var fd=new FormData();
fd.append('username','root');
fd.append('fafafa',file_obj); var xhr=new XMLHttpRequest(); //为了兼容IE旧版本
xhr.open('POST','/upload_file/',true); //指定用什么形式发，发到哪里，是否异步(是)
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
//接收完毕，放到XMLHttprequest对象里面了
var obj=JSON.parse(xhr.responseText);
console.log(obj); //这就是我们要拿的返回值
}
};
xhr.send(fd); //发送的数据，字符串
} function iframeSubmit(){
$('#ifm1').load(function(){
var text=$('#ifm1').contents().find('body').text();
var obj=JSON.parse(text); $('#preview').empty();
var imgTag=document.createElement('img');
imgTag.src="/"+obj.data;
$('#preview').append(imgTag);
})
}
</script>
</body>
</html>
页面效果：
如果不想预览，想直接提交也是可以的。（选中文件以后就可以预览了，然后下一步再点击提交）
给input标签绑定一个onchange事件。用JS方法来提交。$('#form1').submit()
程序粘贴：
views.py
# 基于ModelForm方式来实现
from django.shortcuts import render,HttpResponse
from app01 import models
from django import forms
from django.forms import fields as Ffields
from django.forms import widgets as Fwidgets
def orm(request):
#models.UserGroup.objects.create(name='CEO')
#models.UserGroup.objects.create(name='CFO')
#models.UserGroup.objects.create(name='COO')
return HttpResponse('orm') class UserInfoModelForm(forms.ModelForm):
#自定义额外的字段，比如是否要保存一个月内免登陆。
is_remember=Ffields.CharField(
widget=Fwidgets.CheckboxInput()
)
class Meta:
model=models.UserInfo #指去哪个类里面去获取字段，以后也可以做增删改查。
fields='__all__' #代指的是所有的field字段
#fields=['username'] #还可以是一个列表，可以选择要展示哪几列,只展示username这一列
#exclude=['username'] #把username列排除在外了。
#labels={'username':'请填入用户名'}
#help_texts={'username':'请把你的名字写对'}
#widgets={'username':Fwidgets.Textarea(attrs={'class':'c1'})}
error_messages={
'__all__':{},
'email':{
'required':'邮箱不能为空',
'invalid':'邮箱格式错误',
}
}
#field_classes={'email':Ffields.URLField}
def clean_username(self):
old=self.cleaned_data['username']
return old class UserInfoForm(forms.Form):
username = Ffields.CharField(max_length=32)
email=Ffields.EmailField()
#user_type=fields.ForeignKey(to='UserType',to_field='id')
user_type=Ffields.ChoiceField(
choices=models.UserType.objects.values_list('id','caption')
) def __init__(self,*args,**kwargs):
super(UserInfoForm,self).__init__(*args,**kwargs)
self.fields['user_type'].choices=models.UserType.objects.values_list('id','caption') def index(request):
if request.method=='GET':
obj=UserInfoModelForm()
return render(request,'index.html',{'obj':obj})
elif request.method=='POST':
obj=UserInfoModelForm(request.POST)
if obj.is_valid():
#obj.save()#这个save实现的时候，其实内部包含了2个步骤。可以拆开。
instance=obj.save(False) #什么也没干
instance.save() #只会保存当前这个类，而不会保存manytomany
obj.save_m2m() #保存manytomany
#print(obj.is_valid())
#print(obj.cleaned_data)
#print(obj.errors.as_json())
return render(request, 'index.html', {'obj': obj}) def user_list(request):
li=models.UserInfo.objects.all().select_related('user_type') #先把userinfo中的数据取出来
return render(request,'user_list.html',{'li':li}) def user_edit(request,nid):
#获取当前id对应的用户信息
#显示用户已经存在的数据
if request.method=='GET':
user_obj=models.UserInfo.objects.filter(id=nid).first() #获取对象
mf=UserInfoModelForm(instance=user_obj) #帮咱们生成标签
return render(request, 'user_edit.html',{'mf':mf,'nid':nid})
elif request.method=='POST':
user_obj = models.UserInfo.objects.filter(id=nid).first() #获取对象
mf = UserInfoModelForm(request.POST,instance=user_obj) #instance传进来表示更新，不加的话表示新建了一条数据。
if mf.is_valid():
mf.save()
else:
print(mf.errors.as_json())
return render(request, 'user_edit.html', {'mf': mf, 'nid': nid}) def ajax(request):
return render(request,'ajax.html') def ajax_json(request):
import time
time.sleep(3)
print(request.POST)
ret={'code':True,'data':request.POST.get('username')} #字典
import json
return HttpResponse(json.dumps(ret),status=404,reason='Not Found') def upload(request):
return render(request,'upload.html') def upload_file(request):
print(request.method)
username=request.POST.get('username')
fafafa=request.FILES.get('fafafa')
import os
img_path=os.path.join('static/imgs',fafafa.name)
with open(img_path,'wb') as f:
for item in fafafa.chunks():
f.write(item)
ret = {'code': True, 'data':img_path}
#ret={'code':True,'data':request.POST.get('username')} #字典
import json
return HttpResponse(json.dumps(ret))
Ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text"/>
<input type="button" value="Ajax1" onclick="Ajax1();"/> <!--
<input type="text" id="url"/>
<input type="button" value="发送iframe请求" onclick="iframeRequest();"/>
<iframe id="ifm" src="http://www.baidu.com"></iframe>
--> <form action="/ajax_json/" method="POST" target="ifm1">
<iframe id="ifm1" name="ifm1"></iframe>
<input type="text" name="username"/>
<input type="text" name="email"/>
<input type="submit" onclick="submitForm();" value="Form提交"/>
</form> <script type="text/javascript" src="/static/jquery-1.12.4.js"></script>
<script>
function getXHR(){
var xhr = null;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr; } function Ajax1(){
//var xhr=new XMLHttpRequest(); //创建XMLHttpRequest对象
var xhr=getXHR(); //为了兼容IE旧版本
xhr.open('POST','/ajax_json/',true); //指定用什么形式发，发到哪里，是否异步(是)
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
//接收完毕，放到XMLHttprequest对象里面了
var obj=JSON.parse(xhr.responseText);
console.log(obj); //这就是我们要拿的返回值
}
};
xhr.setRequestHeader('k1','v1'); //发送的时候带着请求头，csrf的时候用。
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
//设置请求头，判断发来的请求头里面，怎么样把数据打包的。这样后台就知道怎么样去解了。
xhr.send("name=root;pwd=123"); //发送的数据
} /*
function iframeRequest(){
var url=$('#url').val();
$('#ifm').attr('src',url);
}
*/ function submitForm(){
$('#ifm1').load(function(){
var text=$('#ifm1').contents().find('body').text();
var obj=JSON.parse(text);
})
} </script>
</body>
</html>
upload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.upload{
display:inline-block;
padding:10px;
background-color:brown;
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
z-index:90;
}
.file{
width:100px;height:50px;opacity:0;
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
z-index:100;
}
</style>
</head>
<body>
<div style="position:relative;width:100px;height:50px;">
<input class="file" type="file" id="fafafa" name="afafaf"/>
<a class="upload">上传</a>
</div>
<input type="button" value="提交XHR" onclick="xhrSubmit();"/>
<input type="button" value="提交jQuery" onclick="jqSubmit();"/> <hr/>
<form id="fm1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
<iframe id="ifm1" name="ifm1" style="display:none;"></iframe>
<input type="file" name="fafafa" onchange="changeUpload();"/>
<input type="submit" onclick="iframeSubmit();" value="Form提交"/>
</form> <div id="preview"></div> <script src="/static/jquery-1.12.4.js"></script>
<script>
function changeUpload(){
$('#ifm1').load(function(){
var text=$('#ifm1').contents().find('body').text();
var obj=JSON.parse(text); $('#preview').empty();
var imgTag=document.createElement('img');
imgTag.src="/"+obj.data;
$('#preview').append(imgTag);
});
$('#fm1').submit();
} function jqSubmit(){
//$('#fafafa')[0]
var file_obj=document.getElementById('fafafa').files[0]; //你要上传的那个文件对象
var fd=new FormData();
fd.append('username','root');
fd.append('fafafa',file_obj);
$.ajax({
url:/upload_file/,
type:'POST',
data:fd,
processData:false,// tell jQuery not to process the data
contentType:false,// tell jQuery not to set contentType
success:function(arg,a1,a2){
console.log(arg);
console.log(a1);
console.log(a2);
}
})
} function xhrSubmit(){
//$('#fafafa')[0]
var file_obj=document.getElementById('fafafa').files[0]; //你要上传的那个文件对象
var fd=new FormData();
fd.append('username','root');
fd.append('fafafa',file_obj); var xhr=new XMLHttpRequest(); //为了兼容IE旧版本
xhr.open('POST','/upload_file/',true); //指定用什么形式发，发到哪里，是否异步(是)
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
//接收完毕，放到XMLHttprequest对象里面了
var obj=JSON.parse(xhr.responseText);
console.log(obj); //这就是我们要拿的返回值
}
};
xhr.send(fd); //发送的数据，字符串
} function iframeSubmit(){
$('#ifm1').load(function(){
var text=$('#ifm1').contents().find('body').text();
var obj=JSON.parse(text); $('#preview').empty();
var imgTag=document.createElement('img');
imgTag.src="/"+obj.data;
$('#preview').append(imgTag);
});
}
</script>
</body>
</html>
urls.py
from django.conf.urls import url
from django.contrib import admin
from app01 import views urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^index/', views.index),
url(r'^user_list/', views.user_list),
url(r'^edit-(\d+)/', views.user_edit),
url(r'^ajax/$', views.ajax),
url(r'^ajax_json/$', views.ajax_json),
url(r'^orm/', views.orm),
url(r'^upload/', views.upload),
url(r'^upload_file/', views.upload_file),
]
页面效果：
Day24-Ajax文件上传的更多相关文章
- AJAX文件上传实践与分析，带HTML5文件上传API。
对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可 ...
- 兼容ie的jquery ajax文件上传
Ajax文件上传插件很多,但兼容性各不一样,许多是对ie不兼容的,另外项目中是要求将网页内容嵌入到桌面端应用的,这样就不允许带flash的上传插件了,如:jquery uploadify...悲剧 对 ...
- jQuery插件AjaxFileUpload实现ajax文件上传
转自:http://www.cnblogs.com/linjiqin/p/3530848.html jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个 ...
- ajax 文件上传，ajax
ajax 文件上传,ajax 啥也不说了,直接上代码! <input type="file" id="file" name="myfile&qu ...
- 转: 如何实现jQuery的Ajax文件上传
[PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上 ...
- [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传
原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件 ...
- php+ajax文件上传
php+ajax文件上传 html: <input id="user_real_name" class="input_show" type="t ...
- springmvc+ajax文件上传
环境:JDK6以上,这里我是用JDK8,mysql57,maven项目 框架环境:spring+springmvc+mybaits或spring+springmvc+mybatis plus 前端代码 ...
- iframe实现Ajax文件上传效果示例
<!doctype html> <html> <head> <meta charset=utf-8> <head> <title> ...
- 使用ajax提交form表单，包括ajax文件上传【转载】
[使用ajax提交form表单,包括ajax文件上传] 前言 转载:作者:https://www.cnblogs.com/zhuxiaojie/p/4783939.html 使用ajax请求数据,很多 ...
随机推荐
- ROC曲线与AUC
一.ROC曲线 1.简介 ROC曲线全称是"受试者工作特征曲线 "(Receiver Operating Characteristic curve),又称为感受性曲线(Sensit ...
- senlenium使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- 3、ObjectARX开发创建直线、圆、圆弧和修改对象属性
一.本节课程 Arx二次开发创建直线.圆.圆弧和修改对象属性 二.本节要讲解的知识点 1.如何应用C++ ARX二次开发创建直线. 2.如何应用C++ ARX二次开发创建圆. 3.如何应用C++ AR ...
- 记录Centos7搭建ftp服务器以及遇到的各种坑
前言 今天被经理要求搭建ftp服务器,然后就去网上搜索了一下教程.搭建成功后(遇到的坑不少)特此记录一下.因为是为了记录一下整个操作流程以防以后使用所以比较啰嗦. 目录 1.安装vsftpd 2.创建 ...
- 树莓派操控SG90舵机
目录 舵机接线 PWM介绍 使用PWM控制舵机 这里使用树莓派来操作sg90的舵机.先看一下这个舵机的样子: 这就是传说中的SG90舵机啦,转角是0-180. SG90舵机接线: SG90舵机有三条线 ...
- Haproxy介绍、安装与配置
Haproxy技术详解一. 介绍HAProxy是一个使用C语言编写的自由及开放源代码软件,其提供高可用性.负载均衡,以及基于TCP和HTTP的应用程序代理.HAProxy特别适用于那些负载特大的web ...
- c++三大概念要分清--重载，隐藏（重定义），覆盖（重写）
重载,隐藏(重定义),覆盖(重写)—这几个名词看着好像很像,不过其实一样都不一样!! 综述: 说明:覆盖中的访问修饰符可以不同是指可以不用显示地用virtual:当访问修饰符改为const或者stat ...
- C++ 单例模式总结与剖析
目录 C++ 单例模式总结与剖析 一.什么是单例 二.C++单例的实现 2.1 基础要点 2.2 C++ 实现单例的几种方式 2.3 单例的模板 三.何时应该使用或者不使用单例 反对单例的理由 参考文 ...
- Hadoop源码阅读环境搭建（IDEA）
拿到一份Hadoop源码之后,经常关注的两件事情就是 1.怎么阅读?涉及IDEA和Eclipse工程搭建.IDEA搭建,选择源码,逐步导入即可:Eclipse可以选择后台生成工程,也可以选择IDE导入 ...
- 函数式编程与React高阶组件
相信不少看过一些框架或者是类库的人都有印象,一个函数叫什么creator或者是什么什么createToFuntion,总是接收一个函数,来返回另一个函数.这是一个高阶函数,它可以接收函数可以当参数,也 ...