一.

<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

1 #基于ModelForm方式来实现
2 from django.shortcuts importrender,HttpResponse3 from app01 importmodels4 from django importforms5 from django.forms importfields as Ffields6 from django.forms importwidgets as Fwidgets7 deform(request):8     #models.UserGroup.objects.create(name='CEO')
9     #models.UserGroup.objects.create(name='CFO')
10     #models.UserGroup.objects.create(name='COO')
11     return HttpResponse('orm')12
13 classUserInfoModelForm(forms.ModelForm):14     #自定义额外的字段，比如是否要保存一个月内免登陆。
15     is_remember=Ffields.CharField(16         widget=Fwidgets.CheckboxInput()17 )18     classMeta:19         model=models.UserInfo  #指去哪个类里面去获取字段，以后也可以做增删改查。
20         fields='__all__'       #代指的是所有的field字段
21         #fields=['username']   #还可以是一个列表，可以选择要展示哪几列,只展示username这一列
22         #exclude=['username']   #把username列排除在外了。
23         #labels={'username':'请填入用户名'}
24         #help_texts={'username':'请把你的名字写对'}
25         #widgets={'username':Fwidgets.Textarea(attrs={'class':'c1'})}
26         error_messages={27             '__all__':{},28             'email':{29                 'required':'邮箱不能为空',30                 'invalid':'邮箱格式错误',31 }32 }33         #field_classes={'email':Ffields.URLField}
34     defclean_username(self):35         old=self.cleaned_data['username']36         returnold37
38 classUserInfoForm(forms.Form):39     username = Ffields.CharField(max_length=32)40     email=Ffields.EmailField()41     #user_type=fields.ForeignKey(to='UserType',to_field='id')
42     user_type=Ffields.ChoiceField(43         choices=models.UserType.objects.values_list('id','caption')44 )45
46     def __init__(self,*args,**kwargs):47         super(UserInfoForm,self).__init__(*args,**kwargs)48         self.fields['user_type'].choices=models.UserType.objects.values_list('id','caption')49
50 defindex(request):51     if request.method=='GET':52         obj=UserInfoModelForm()53         return render(request,'index.html',{'obj':obj})54     elif request.method=='POST':55         obj=UserInfoModelForm(request.POST)56         ifobj.is_valid():57             #obj.save()#这个save实现的时候，其实内部包含了2个步骤。可以拆开。
58             instance=obj.save(False) #什么也没干
59             instance.save() #只会保存当前这个类，而不会保存manytomany
60             obj.save_m2m() #保存manytomany
61         #print(obj.is_valid())
62         #print(obj.cleaned_data)
63         #print(obj.errors.as_json())
64         return render(request, 'index.html', {'obj': obj})65
66 defuser_list(request):67     li=models.UserInfo.objects.all().select_related('user_type') #先把userinfo中的数据取出来
68     return render(request,'user_list.html',{'li':li})69
70 defuser_edit(request,nid):71     #获取当前id对应的用户信息
72     #显示用户已经存在的数据
73     if request.method=='GET':74         user_obj=models.UserInfo.objects.filter(id=nid).first() #获取对象
75         mf=UserInfoModelForm(instance=user_obj) #帮咱们生成标签
76         return render(request, 'user_edit.html',{'mf':mf,'nid':nid})77     elif request.method=='POST':78         user_obj = models.UserInfo.objects.filter(id=nid).first() #获取对象
79         mf = UserInfoModelForm(request.POST,instance=user_obj) #instance传进来表示更新，不加的话表示新建了一条数据。
80         ifmf.is_valid():81 mf.save()82         else:83             print(mf.errors.as_json())84         return render(request, 'user_edit.html', {'mf': mf, 'nid': nid})85
86 defajax(request):87     return render(request,'ajax.html')88
89 defajax_json(request):90     importtime91     time.sleep(3)92     print(request.POST)93     ret={'code':True,'data':request.POST.get('username')} #字典
94     importjson95     return HttpResponse(json.dumps(ret),status=404,reason='Not Found')96
97 defupload(request):98     return render(request,'upload.html')99
100 defupload_file(request):101     print(request.method)102     username=request.POST.get('username')103     fafafa=request.FILES.get('fafafa')104     print(username,fafafa)105     with open(fafafa.name,'wb') as f:106         for item infafafa.chunks():107 f.write(item)108
109     ret={'code':True,'data':request.POST.get('username')} #字典
110     importjson111     return HttpResponse(json.dumps(ret))

upload.html

var file_obj=document.getElementById('fafafa').files[0]; //你要上传的那个文件对象；如果是文本的话，可以用.value 或 .val

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4     <meta charset="UTF-8">
5     <title>Title</title>
6     <style>
7 .upload{8             display:inline-block;9 padding:10px;10             background-color:brown;11 position:absolute;12 top:0;13 bottom:0;14 right:0;15 left:0;16             z-index:90;17 }18 .file{19 width:100px;height:50px;opacity:0;20 position:absolute;21 top:0;22 bottom:0;23 right:0;24 left:0;25             z-index:100;26 }27     </style>
28 </head>
29 <body>
30     <div style="position:relative;width:100px;height:50px;">
31         <input class="file" type="file" id="fafafa" name="afafaf"/>
32         <a class="upload">上传</a>
33     </div>
34     <input type="button" value="提交XHR" οnclick="xhrSubmit();"/>
35     <script>
36 function xhrSubmit(){37             //$('#fafafa')[0]38             var file_obj=document.getElementById('fafafa').files[0]; //你要上传的那个文件对象39             var fd=new FormData();40             fd.append('username','root'); 这里是字符串，上面是文件，没法直接发过去，所以需要引入一个新的FormData对象。41             fd.append('fafafa',file_obj); 加普通值可以，加对象也可以。42
43             var xhr=new XMLHttpRequest(); //为了兼容IE旧版本44             xhr.open('POST','/upload_file/',true); //指定用什么形式发，发到哪里，是否异步(是)45             xhr.onreadystatechange=function(){46                 if(xhr.readyState==4){47                     //接收完毕，放到XMLHttprequest对象里面了48                     var obj=JSON.parse(xhr.responseText);49                     console.log(obj); //这就是我们要拿的返回值50 }51 };52             xhr.send(fd); //发送的数据，字符串53 }54     </script>
55 </body>
56 </html>

Ajax.html

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4     <meta charset="UTF-8">
5     <title>Title</title>
6 </head>
7 <body>
8     <input type="text"/>
9     <input type="button" value="Ajax1" οnclick="Ajax1();"/>
10
11     <!--
12     <input type="text" id="url"/>
13     <input type="button" value="发送iframe请求" οnclick="iframeRequest();"/>
14     <iframe id="ifm" src="http://www.baidu.com"></iframe>
15     -->
16
17     <form action="/ajax_json/" method="POST" target="ifm1">
18         <iframe id="ifm1" name="ifm1"></iframe>
19         <input type="text" name="username"/>
20         <input type="text" name="email"/>
21         <input type="submit" οnclick="submitForm();" value="Form提交"/>
22     </form>
23
24     <script type="text/javascript" src="/static/jquery-1.12.4.js"></script>
25     <script>
26 function getXHR(){27             var xhr =null;28             if(XMLHttpRequest){29                 xhr =new XMLHttpRequest();30             }else{31                 xhr = new ActiveXObject("Microsoft.XMLHTTP");32 }33             returnxhr;34
35 }36
37 function Ajax1(){38             //var xhr=new XMLHttpRequest(); //创建XMLHttpRequest对象39             var xhr=getXHR(); //为了兼容IE旧版本40             xhr.open('POST','/ajax_json/',true); //指定用什么形式发，发到哪里，是否异步(是)41             xhr.onreadystatechange=function(){42                 if(xhr.readyState==4){43                     //接收完毕，放到XMLHttprequest对象里面了44                     var obj=JSON.parse(xhr.responseText);45                     console.log(obj); //这就是我们要拿的返回值46 }47 };48             xhr.setRequestHeader('k1','v1'); //发送的时候带着请求头，csrf的时候用。49             xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');50             //设置请求头，判断发来的请求头里面，怎么样把数据打包的。这样后台就知道怎么样去解了。51             xhr.send("name=root;pwd=123"); //发送的数据52 }53
54        /*
55 function iframeRequest(){56             var url=$('#url').val();57             $('#ifm').attr('src',url);58 }59        */
60
61 function submitForm(){62             $('#ifm1').load(function(){63                 var text=$('#ifm1').contents().find('body').text();64                 var obj=JSON.parse(text);65 })66 }67
68     </script>
69 </body>
70 </html>

urls.py

1 from django.conf.urls importurl2 from django.contrib importadmin3 from app01 importviews4
5 urlpatterns =[6     url(r'^admin/', admin.site.urls),7     url(r'^index/', views.index),8     url(r'^user_list/', views.user_list),9     url(r'^edit-(\d+)/', views.user_edit),10     url(r'^ajax/$', views.ajax),11     url(r'^ajax_json/$', views.ajax_json),12     url(r'^orm/', views.orm),13     url(r'^upload/', views.upload),14     url(r'^upload_file/', views.upload_file),15 ]

页面效果：

3.2，基于jQuery来实现文件上传。

以下这两句是告诉jquery，不用对我的数据做特殊的处理。

processData:false,// tell jQuery not to process the datacontentType: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" οnclick="xhrSubmit();"/><input type="button" value="提交jQuery" οnclick="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 datacontentType:false,// tell jQuery not to set contentTypesuccess: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 oldclass 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() #只会保存当前这个类，而不会保存manytomanyobj.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 timetime.sleep(3)print(request.POST)ret={'code':True,'data':request.POST.get('username')} #字典import jsonreturn 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 jsonreturn 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" οnclick="Ajax1();"/><!--<input type="text" id="url"/><input type="button" value="发送iframe请求" οnclick="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" οnclick="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" οnclick="xhrSubmit();"/><input type="button" value="提交jQuery" οnclick="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" οnclick="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 datacontentType:false,// tell jQuery not to set contentTypesuccess: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 viewsurlpatterns = [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 osimg_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 jsonreturn 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" οnclick="xhrSubmit();"/><input type="button" value="提交jQuery" οnclick="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" οnclick="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 datacontentType:false,// tell jQuery not to set contentTypesuccess: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 oldclass 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() #只会保存当前这个类，而不会保存manytomanyobj.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 timetime.sleep(3)print(request.POST)ret={'code':True,'data':request.POST.get('username')} #字典import jsonreturn 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 osimg_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 jsonreturn 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" οnclick="Ajax1();"/><!--<input type="text" id="url"/><input type="button" value="发送iframe请求" οnclick="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" οnclick="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" οnclick="xhrSubmit();"/><input type="button" value="提交jQuery" οnclick="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" οnchange="changeUpload();"/><input type="submit" οnclick="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 datacontentType:false,// tell jQuery not to set contentTypesuccess: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 viewsurlpatterns = [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),
]

页面效果：

转载于:https://www.cnblogs.com/momo8238/p/7767541.html

Day24-Ajax文件上传相关推荐

  1. ajax iframe实现文件上传,iframe实现Ajax文件上传效果示例

    avascript部分 ajax 文件上传~~ window.οnlοad=function(){ var form=document.getElementsByTagName('form')[0]; ...

  2. 转: 如何实现jQuery的Ajax文件上传

    [PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的. 实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用 ...

  3. 关于jQuery在Asp.Net Mvc 框架下Ajax文件上传的实现

    1. 实现传统的网络文件上传解决方案 首先,我先实现一个传统的网络文件上传方案,建立一个web页面,我还需要一个<form>和两个<input>元素就能解决问题,如在Index ...

  4. iframe ajax上传,ajax--iframe模拟ajax文件上传效果

    js无权读取本地的文件,so不能上传文件但是 有这几种方法 1 iframe伪装 jquery-uploaded-file 2 swf插件 (这个不讲,是一个单独的软件 3 html5 iframe模 ...

  5. Ajax（form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传）

    form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...

  6. [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传

    [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 Fine Upload ...

  7. html如何显示上传进度条,HTML5 Ajax文件上传进度条如何显示

    这篇文章主要介绍了HTML5 Ajax文件上传进度条是如何显示的,基于原生html5实现,不需要falsh支持,进度可以自定义显示,控制灵活,对HTML5上传进度条感兴趣的小伙伴们可以参考一下 原本打 ...

  8. 上传文件ajax,ajax 文件上传

    ajax 文件上传 用户名: 文件:

  9. Ajax 文件上传之PHP心得

    最近发现网上转载不注明出处的文章很多,为了创造一个良好的开源环境.请您转载后注明出处.谢谢合作!这样会鼓励我们的开源欲望. jquery 这个JS组件不知道大家用过没有?在有一定的Ajax基础之后,利 ...

  10. django中的Ajax文件上传

    主要介绍两个 1.ajax文件上传 2.写路由器 3.创建对应的函数 4.file_put.html代码 <!DOCTYPE html> <html lang="en&qu ...

最新文章

  1. MYSQL人事工资管理系统-插入数据（三）
  2. Python的学习过程中not enough values to unpack (expected 2, got 1)解决方案
  3. R语言使用ggplot2包使用geom_dotplot函数绘制分组点图(单色填充、分组颜色填充)实战（dot plot）
  4. [BZOJ1106/POI2007]Tet立方体大作战
  5. 灵魂拷问：机器学习、深度学习专业已经沦为调包专业了吗？
  6. 开源XDesigner ORM 框架设计
  7. 【思维】javascript选择排序
  8. 《机器学习实战》代码实现学习一 使用K-近邻算法改进约会网站的配对效果(数据准备)...
  9. 2021-07-01小程序01
  10. Codeforces Round #328 (Div. 2)D. Super M 虚树直径
  11. 推荐一门开源课程“C/C++：从基础语法到优化策略”
  12. Unity3D游戏框架之dll反编译和混淆
  13. zemax中如何和matlab中通信,如何在ZEMAX与MATLAB之间通信.doc
  14. 灌篮青春完结篇----灌篮．青春
  15. javascript开发HTML5游戏--斗地主(单机模式part3)
  16. 让你秒懂的Lambda表达式超级详细讲解
  17. （应用程序无法正常启动0xc0000142） 关于win10周年版更新后无法正常使用vc6.0问题的解决方法
  18. 21天学通java第7版pdf_21天学通Java.第7版.pdf
  19. php h5微信支付和app微信支付区别,关于微信公众号支付 微信H5支付和微信APP支付的问题 （PHP）TP+VUE...
  20. 学习笔记-工程图学基础（三）

热门文章

  1. EasyDarwin开源流媒体服务器如何实现按需推送直播的
  2. Oracle性能优化
  3. Mr.J--C语言学习Errors：LNK2019
  4. jeecms v9导入myeclipse 2015 ehcache.xml报错问题
  5. Unix高级环境编程
  6. Java中Javadoc的{@link}与@see的简单区别
  7. Http协议与TCP协议理解（转载的）
  8. ios9和xcode7的适配问题
  9. 如何在程序中打开PDF文件 -C#文章(.net)
  10. 转向与重定向的联系与区别