一.
这个标签是改不了的，只能通过其他方式，对它进行修饰。
因为input 框太难看了，又无法设置样式。
可以把它设置成在最上面，并且透明度等于0，把我们写的样式放到下面。
此图是抽屉网址中的好看的上传按钮。
二. 程序粘贴
input 标签应该放在最上面。a标签应该在最下面。让input的透明度为0，这样就可以看到a标签了。
views.py
def upload(request): return render(request,'upload.html')
upload.html
Title
最终的效果：
点击上传按钮的时候，就可以选择文件了。
三. 选择文件后提交，提交前首先得获取input值。
3.1 用原生的Ajax实现文件上传。 要依赖FormData对象。基于原生Ajax可以实现文件上传，不过要借助于 FormData 这个对象。
程序粘贴：
views.py
1 # 基于ModelForm方式来实现 2 from django.shortcuts import render,HttpResponse 3 from app01 import models 4 from django import forms 5 from django.forms import fields as Ffields 6 from django.forms import widgets as Fwidgets 7 def orm(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 class UserInfoModelForm(forms.ModelForm): 14 #自定义额外的字段，比如是否要保存一个月内免登陆。 15 is_remember=Ffields.CharField( 16 widget=Fwidgets.CheckboxInput() 17 ) 18 class Meta: 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 def clean_username(self): 35 old=self.cleaned_data['username'] 36 return old 37 38 class UserInfoForm(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 def index(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 if obj.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 def user_list(request): 67 li=models.UserInfo.objects.all().select_related('user_type') #先把userinfo中的数据取出来 68 return render(request,'user_list.html',{ 'li':li}) 69 70 def user_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 if mf.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 def ajax(request): 87 return render(request,'ajax.html') 88 89 def ajax_json(request): 90 import time 91 time.sleep(3) 92 print(request.POST) 93 ret={ 'code':True,'data':request.POST.get('username')} #字典 94 import json 95 return HttpResponse(json.dumps(ret),status=404,reason='Not Found') 96 97 def upload(request): 98 return render(request,'upload.html') 99 100 def upload_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 in fafafa.chunks():107 f.write(item)108 109 ret={ 'code':True,'data':request.POST.get('username')} #字典110 import json111 return HttpResponse(json.dumps(ret)) upload.html
var file_obj=document.getElementById('fafafa').files[0]; //你要上传的那个文件对象；如果是文本的话，可以用.value 或 .val
1 2 3 4 5Title 6 28 29 3031 32 上传3334 35 55 56
Ajax.html
1 2 3 4 523 24 25 69 70Title 6 7 8 9 10 11 16 17
1 from django.conf.urls import url 2 from django.contrib import admin 3 from app01 import views 4 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 data contentType:false,// tell jQuery not to set contentType 程序粘贴：
upload.html
Title
页面效果：
3.3，用原生的Ajax和jQuery都实现了文件的上传，但是这两者都依赖于FormData （低版本的又不支持）
需要用iframe的方式提交（兼容所有的浏览器，最主要是兼容IE）。发数据有3种方式，上传文件也应该有3种方式。
程序粘贴：
views.py
# 基于ModelForm方式来实现from django.shortcuts import render,HttpResponsefrom app01 import modelsfrom django import formsfrom django.forms import fields as Ffieldsfrom django.forms import widgets as Fwidgetsdef 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() #只会保存当前这个类，而不会保存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
Title
upload.html
<iframe id="ifm1" name="ifm1" style="display:none;"></iframe> 不让用户看到iframe框。
Title
urls.py
from django.conf.urls import urlfrom django.contrib import adminfrom 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 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
Title
页面效果：
如果不想预览，想直接提交也是可以的。（选中文件以后就可以预览了，然后下一步再点击提交）
给input标签绑定一个onchange事件。用JS方法来提交。$('#form1').submit()
程序粘贴：
views.py
# 基于ModelForm方式来实现from django.shortcuts import render,HttpResponsefrom app01 import modelsfrom django import formsfrom django.forms import fields as Ffieldsfrom django.forms import widgets as Fwidgetsdef 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() #只会保存当前这个类，而不会保存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
Title
upload.html
Title
urls.py
from django.conf.urls import urlfrom django.contrib import adminfrom 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),]
页面效果：
