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{
            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;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 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 json
111     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             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;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" onclick="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" onclick="Ajax1();"/>
10 
11     <!--
12     <input type="text" id="url"/>
13     <input type="button" value="发送iframe请求" onclick="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" onclick="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             return xhr;
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 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

<!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{
            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;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

<!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{
            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;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{
            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;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{
            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;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),
]

页面效果：