图片预览

应用：

登录注册时头像的图片预览：

1 伪ajax 提交文件，后台接收后返回文件路径，伪ajax更新src 提供预览，第二次提交数据时，提交头像的路径。小bug是后台必须临时保存上传的头像文件

<form  id='f1' action="/register1/"  method="post" target="ifr" enctype="multipart/form-data" novalidate>
        {% csrf_token %}
        <iframe id="ifr" name="ifr"></iframe>
        <input id='i1' type="file" onchange="uploadimg()" name="avator">
        <img id='avator' src="/static/img/avatar.png">
    </form>


 //伪ajax上传文件
    function uploadimg(){
        document.getElementById('f1').submit();
        document.getElementById('ifr').onload=ShowImg;
    }
    function ShowImg(){
        var content=document.getElementById('ifr').contentWindow.document.body.innerText;
        document.getElementById('avator').src='/'+content;
        var tag=document.createElement('input');
        console.log(content);
        tag.name='avator_path';
        tag.value='/'+content;
        tag.style.display='none';
        document.getElementById('submit_form').appendChild(tag)
    }


def register1(request):
    avator_obj = request.FILES.get('avator')

    file_path = os.path.join('static', 'img', avator_obj.name)
    with open(file_path, 'wb') as f:
        for chunk in avator_obj.chunks():
            f.write(chunk)
            return HttpResponse(file_path)

 

2   原生ajax提交文件（获取CSRF）formdata ,后台接收后返回文件路径，ajax更新src 提供预览，第二次提交数据 时，提交头像的路径
3   本地上传预览，不用提交到后台，提供预览功能，在提交数据时，一起提交头像的文件数据

 

<form class="form-horizontal" id='submit_form' method="post" action="/register/" novalidate enctype="multipart/form-data">
        {% csrf_token %}
        <div>
            <img id='avatar1' src="/static/img/avatar.png" >
{#            <input type="file" id="imgselect">#}
            {{ obj.avator }}{{ obj.errors.avator.0 }}
        </div>
</form>


$(function(){
        bindAvatar()
    });

    function bindAvatar(){
        if(window.URL.createObjectURL){
            bindAvatar2();
        }else if(window.FileReader){
            bindAvatar3()
        }else{
            bindAvatar1()
        }
    }
    //原生ajax上传文件
    function bindAvatar1(){
        $('#imgselect').change(function(){
            var csrf=$('input[name="csrfmiddlewaretoken"]').val();

            var formdata=new FormData();
            formdata.append('avator',$(this)[0].files[0]);
            formdata.append("csrfmiddlewaretoken",csrf);

            var xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function () {
                if (xhr.readyState==4){
                    var file_path=xhr.responseText;
                    document.getElementById('avatar1').src='/'+file_path;
                }
            };
            xhr.open('POST','/register1/');
            xhr.send(formdata)
        })
    }
    //本地上传预览
    function bindAvatar2() {
        $('#imgselect').change(function(){
            var obj=$(this)[0].files[0];

            var v=window.URL.createObjectURL(obj);
            $('#avatar1').attr('src',v);
            $('#avatar1').load(function () {
                window.URL.revokeObjectURL(v);
            })
        })
    }

    function bindAvatar3(){
        var obj=$(this)[0].files[0];
        var reader= new FileReader();
        reader.onload=function (e) {
            $('#avatar1').attr('src',this.result);
        };
        reader.readAsDataURL(obj);
    }

def register(request):
     if request.method=='GET':
         obj=registerForm(request)
         return render(request,'register.html',{'obj':obj})

     else:
         # 第一种方案：伪ajax提交用户头像信息
         # session_code = request.session.get('code')
         # #获取form组件生成的标签的值
         # obj = registerForm(request.POST)
         # #获取伪ajax生成的input标签的值（用户头像）
         # avator_path=request.POST.get('avator_path')
         # if obj.is_valid():
         #     code=obj.cleaned_data.pop('code')
         #     #判断验证码信息
         #     if session_code.upper()==code.upper():
         #         #向clean_data中加入一个键值对，存放用户头像信息
         #         obj.cleaned_data['avator']=avator_path
         #         #更新数据库
         #         models.user.objects.create(**obj.cleaned_data)
         #         return redirect('/')
         #     else:
         #         return render('register.html',{'msg': '验证码错误'})
         # else:
         #     return render(request, 'register.html', {'obj': obj})



         #第二种方案：本地预览头像，在form组件生成的标签中提交头像信息
         obj=registerForm(request,request.POST,request.FILES)
         if obj.is_valid():
             obj.cleaned_data.pop('code')
             obj.cleaned_data.pop('password2')
             models.user.objects.create(**obj.cleaned_data)
             return redirect('/')
         else:
             return render(request, 'register.html', {'obj': obj})