文件上传

一，form表单的方式上传

1，upload.html

{% block css %}
{% endblock %}

{% block content %}
<h1>编辑老师</h1>
<form action="/upload.html" method="post" enctype="multipart/form-data">
    <input name="user" type="text" />
    <input type="file" name="fafafa" />
</form>
<div>
    {% for src in img_list%}
    <img id="imgs" src="/{{src}}">
    {%endfor%}
    
</div>
{% endblock %}


{% block js %}
{% endblock %}

2,处理函数

import os
def handUpload(request):
    if request.method=='GET':
        img_list=models.Img.objects.all()
        return render(request,'upload.html',{'img_list':img_list})
        
    elif request.method=='POST':
        user=request.POST.get('user')
        fafafa=request.POST.get('fafafa')
        obj=request.FILES.get('fafafa')
        f=open(os.path.join('static','upload',obj.name),'wb')
        for chunj in obj.chunks():
            f.write(chunk)
        f.close()
        model.Img.objects.create(path=file_path)
        return redict('upload.html')

二，ajax方式提交

1，FormData对象

传统的传数据方法：

　　xml.send("k1=v1; k2=v2;")

　　$.ajax(

　　　　url:

　　　　data:{ 'k1':'v1', ' k2':'v2' }

　　)

FormData方式：

//新建一个formdata对象
dict=new FormData()
daict.append('k1','v1');
dictt.appent('k2','v2');
dict.append('fafaffa',文件对象)

1，前端代码

{% block css %}
{% endblock %}

{% block content %}
<h1>编辑老师</h1>

    <input name="user" type="text" />
    <input type="file" name="fafafa" />
   <button onclick="Uploadjq()">jq提交</button>
<div>
    {% for src in img_list%}
    <img id="imgs" src="/{{src}}">
    {%endfor%}
    
</div>
{% endblock %}


{% block js %}
    <script>
        function Uploadjq(){
            var dic = new FormData();
            dic.append('user','v1');
            dic.append('fafafa',document.getElementById('img').filters[0]);
            $.ajax({
                url:'/upload.html',
                type:'POST',
                data:dic,
                processData:false,    //保持原来的数据不便
                contentType:false,
                dataType:'json',
                success:function(arg){
                    //arg={'status':true,'path':file_path}
                    if(arg.status){
                        var img=document.createElement('img');
                        img.src='/'+arg.path;
                        $('#imgs').append(img);
                    }
                }
            })
        }
    </script>
{% endblock %}

2,处理函数

import os
def handUpload(request):
    if request.method=='GET':
        img_list=models.Img.objects.all()
        return render(request,'upload.html',{'img_list':img_list})
        
    elif request.method=='POST':
        user=request.POST.get('user')
        fafafa=request.POST.get('fafafa')
        obj=request.FILES.get('fafafa')
        f=open(os.path.join('static','upload',obj.name),'wb')
        for chunj in obj.chunks():
            f.write(chunk)
        f.close()
        ret={'status':true,'path':file_path}
        model.Img.objects.create(path=file_path)
        return httprespondes(ret)

 三，iframe与表单form的结合

iframe实现的效果与Ajax相似，都是悄悄的上传，但本质不同。

1，upload.html文件

{% block css %}
{% endblock %}

{% block content %}
<h1></h1>
<form action="/upload.html" method="post" target="iframe_1" enctype="multipart/form-data">
    <iframe name="iframe_1" src=""></iframe>
    <!--
        作者：2827363471@qq.com
        时间：2020-09-26
        描述：iframe的实质
        
        #document
        <html>
    <head></head>
    body{'path':"static\\upload\\4.jpg","status":true}
</html>
    -->
    <input name="user" type="text" />
    <input type="file" name="fafafa" />
    <input type="submit" value="iframe提交" />
</form>
<div>
    {% for src in img_list%}
    <img id="imgs" src="{{src}}">
    {%endfor%}
    
</div>
{% endblock %}


{% block js %}
    <script>
        //获取iframe的内容
        var str_Json=$('#iframe_1').contents().find('body').text();
        var obj=JSON.parse(str_Json);
        if(obj.status){
            var img=document.createElement('img');
            img.src="/"+obj.path;
            $('#imgs').append(img);
        }
    </script>
{% endblock %}

 

posted on 2020-09-25 10:22  居一雪  阅读(120)  评论(0)  编辑  收藏  举报

导航