formdata/ajax上传文件
from django.shortcuts import render,HttpResponse # Create your views here. def index(request): if request.method=='POST': ret = {'status': True, 'message': '....'} import json return HttpResponse('hello') return render(request,'index.html') def formdata(request): data=request.POST data1=request.FILES print(data1) return HttpResponse('heh')
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <h6>基于Iframe+Form表单</h6> <iframe id="iframe" name="ifra"></iframe> <form id="fm" action="/index" method="POST" target="ifra"> {% csrf_token %} <input name="root" value="111111"/> <a οnclick="AjaxSubmit5()">提交</a> </form> </div> <h1>formdata上传</h1> <input id='file22' type="file" name="file"> <button id="button" οnclick="func3()">upload</button> </body> </html> <script src="/static/jquery-3.1.1.js"></script> <script> function func3() { var data = new FormData(); data.append('k3', document.getElementById('file22').files[0]); $.ajax({ url: '/formdata', type: 'post', data: data, success: function (arg) { console.log(arg) }, processData: false, contentType: false }); } function AjaxSubmit5() { document.getElementById('iframe').onload = reloadIframe; document.getElementById('fm').submit(); } function reloadIframe() { // this=当前标签 //console.log(ths); //console.log(ths.contentWindow); //console.log(ths.contentWindow.document.body.innerHTML); //console.log($(ths).contents().find('body').html()); var content = this.contentWindow.document.body.innerHTML; var obj = JSON.parse(content); if (obj.status) { alert(obj.message); } } </script>
xml上传
function func4() { var data = new FormData(); data.append('k3',document.getElementById('file22').files[0]); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if(xhr.readyState == 4){ // 接收完毕服务器返回的数据 console.log(xhr.responseText); } }; xhr.open('POST','/formdata.html'); xhr.send(data); } 使用formdata来封装文件,进行上传
iframe上传
依旧是iframe和form表单进行结合,然后在form表单中有文件选项
<iframe id="iframe1" name="ifra1"></iframe> <form id="fm1" action="/formdata" method="POST" target="ifra" enctype="multipart/form-data"> {% csrf_token %} <input type="file" id="file1" name="file1"> <a οnclick="func5()">提交</a> </form>
function func5() { document.getElementById('iframe1').onload = reloadIframe1; document.getElementById('fm1').submit(); } function reloadIframe1() { var content = this.contentWindow.document.body.innerHTML; console.log(content); }
实现预览功能
思路:
给input file标签绑定onchange事件,只要有数据提交就发生变化,此时后台可以得到数据,然后再进行返回,
f=request.post.get('file')
然后默默的返回给前端,前端生成一个标签,进行预览,,或者直接返回后台的一个路径,前端再访问路径,,
需要在每次删除之前,清楚这个标签内的路径,防止显示多个文件
ajax跨域jsonp
想要访问外部地址并且获取数据,在script中不能识别各种数据,所以有巧妙的方法来解决,
外部:返回带有函数名的数据,函数名中包裹真正想给的数据,数据作为函数的参数
内部:自己创建一个函数,函数名和外部网站发来的相同,在这个函数中,可以对参数进行操作,当然也可以进行显示啦
在jquery中已经准备好这种方式:
function func7() { var tag = document.createElement('script'); tag.src = 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403'; document.head.appendChild(tag); document.head.removeChild(tag); } function list(arg) { console.log(arg) } 提交按钮, 触发一个函数, 在这个函数中 ,新建一个script标签,然后连接到外站,接着删除这个标签。 在此期间,外站返回的数据,已经包裹一个函数,再新建这个函数,运行,就可以得到数据
准备好的:
function func888() { $.ajax({ url: 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403', type: 'POST', dataType: 'jsonp', jsonp: 'callback', jsonpCallback: 'func' }) } function list(arg) { console.log(arg) }