一，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 %}