<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #img img{ height: 200px; 200px; } </style> </head> <body> <h1>普通文件上传</h1> <div> <form method="POST" action="/upload.html" enctype="multipart/form-data"> {% csrf_token %} <input type="file" name="fafafa"> <input type="submit" value="上传"> </form> </div> <h1>AJAX文件上传</h1> <div> <input type="file" id="img"> <input type="button" value="ajax上传" onclick="Upload()" /> </div> <hr/> <div> <h1>测试功能IFRAME</h1> <input type="text" id="url"> <input type="button" value="点我" onclick="iframeChange();"> <iframe src="" frameborder="1" id="ifr" ></iframe> <hr/> <h1>基于iframe实现文件上传功能</h1> <form method="POST" action="/upload.html" target="iframe_1"> <iframe src="" frameborder="1" name="iframe_1" id="iframe_1" onload="LoadIframe();"></iframe> <input type="text" name="user"> <input type="file" name="fafafa"> <input type="submit" value="上传"> </form> </div> <div id="img"> <H1>图片列表</H1> {% for item in url_list %} <img src="{{ item.imgsrc }}"> {% endfor %} </div> <script src="/static/jq/jquery-3.3.1.js"></script> <script> function Upload() { var dic=new FormData(); dic.append('user','v1'); dic.append('fafafa',document.getElementById('img').files[0]);//获取当前文件的第一个对象 var xml=new XMLHttpRequest(); xml.open('POST','/upload.html',true);//用异步的方式//传文件 不需要请求头 xml.send(dic); } function iframeChange() { var url=$("#url").val(); $("#ifr").attr("src",url); } function LoadIframe() { console.log(111); //获取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; $("#img").append(img) } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #img img{ height: 200px; width: 200px; } </style> </head> <body> <h1>普通文件上传</h1> <div> <form method="POST" action="/upload.html" enctype="multipart/form-data"> {% csrf_token %} <input type="file" name="fafafa"> <input type="submit" value="上传"> </form> </div> <h1>AJAX文件上传</h1> <div> <form > {% csrf_token %} <input type="file" id="img" /> <input type="button" value="ajax上传" onclick="Upload();"> </form> </div> <!-- <hr/> <div> <h1>测试功能IFRAME</h1> <input type="text" id="url"> <input type="button" value="点我" onclick="iframeChange();"> <iframe src="" frameborder="1" id="ifr" ></iframe> <hr/> <h1>基于iframe实现文件上传功能</h1> <form method="POST" action="/upload.html" target="iframe_1"> <iframe src="" frameborder="1" name="iframe_1" id="iframe_1" onload="LoadIframe();"></iframe> <input type="text" name="user"> <input type="file" name="fafafa"> <input type="submit" value="上传"> </form> </div> --> <div id="img"> <H1>图片列表</H1> {% for item in url_list %} <img src="{{ item.imgsrc }}"> {% endfor %} </div> <script src="/static/jq/jquery-3.3.1.js"></script> <script> /* $.ajaxSetup({ beforeSend: function(xhr, settings) { xhr.setRequestHeader("X-CSRFToken", csrftoken); } });*/ function Upload() { var dic=new FormData(); dic.append('user','v1'); dic.append('fafafa',document.getElementById('img').files[0]);//获取当前文件的第一个对象 //alert(csrftoken); var xml=new XMLHttpRequest(); xml.open('POST','/upload.html',true);//用异步的方式//传文件 不需要请求头 xml.setRequestHeader('X-CSRFtoken',csrftoken);//需要把crsftoken参数传递过去 xml.send(dic); } //取到csrftoken的值 function getCookie(name) { var cookieValue = null; if (document.cookie && document.cookie !== '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); // Does this cookie string begin with the name we want? if (cookie.substring(0, name.length + 1) === (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } var csrftoken = getCookie('csrftoken'); /* function iframeChange() { var url=$("#url").val(); $("#ifr").attr("src",url); } function LoadIframe() { console.log(111); //获取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; $("#img").append(img) } } */ </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #imgs img{ height: 200px; width: 200px; } </style> </head> <body> <h1>普通文件上传</h1> <div> <form method="POST" action="/upload.html" enctype="multipart/form-data"> {% csrf_token %} <input type="file" name="fafafa"> <input type="submit" value="上传"> </form> </div> <h1>AJAX文件上传</h1> <div> <form > {% csrf_token %} <input type="file" id="img" /> <input type="button" value="ajax上传" onclick="Upload();"> </form> </div> <hr/> <div> <h1>测试功能IFRAME</h1> <input type="text" id="url"> <input type="button" value="点我" onclick="iframeChange();"> <iframe src="" frameborder="1" id="ifr" ></iframe> <hr/> <h1>基于iframe实现文件上传功能</h1> <form method="POST" action="/upload.html" target="iframe_1" enctype="multipart/form-data"> {% csrf_token %} <iframe src="" frameborder="1" name="iframe_1" id="iframe_1" onload="LoadIframe();"></iframe> <input type="text" name="user"> <input type="file" name="fafafa"> <input type="submit"> </form> </div> <div id="imgs"> <H1>图片列表</H1> {% for item in url_list %} <img src="{{ item.imgsrc }}"> {% endfor %} </div> <script src="/static/jq/jquery-3.3.1.js"></script> <script> /* $.ajaxSetup({ beforeSend: function(xhr, settings) { xhr.setRequestHeader("X-CSRFToken", csrftoken); } });*/ function Upload() { var dic=new FormData(); dic.append('user','v1'); dic.append('fafafa',document.getElementById('img').files[0]);//获取当前文件的第一个对象 //alert(csrftoken); var xml=new XMLHttpRequest(); xml.onreadystatechange=function () { if(xml.readyState==4 && xml.status==200){ var obj=JSON.parse(xml.responseText); if (obj.status){ //console.log(obj.path) var img=document.createElement('img'); img.src="/"+obj.path; document.getElementById('imgs').appendChild(img) } } }; xml.open('POST','/upload.html',true);//用异步的方式//传文件 不需要请求头 xml.setRequestHeader('X-CSRFtoken',csrftoken);//需要把crsftoken参数传递过去 xml.send(dic); } //取到csrftoken的值 function getCookie(name) { var cookieValue = null; if (document.cookie && document.cookie !== '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); // Does this cookie string begin with the name we want? if (cookie.substring(0, name.length + 1) === (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } var csrftoken = getCookie('csrftoken'); function iframeChange() { var url=$("#url").val(); $("#ifr").attr("src",url); } function LoadIframe() { console.log(111); //获取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> </body> </html>
import os import json def upload(request): ret={"status":False,"path":None} if request.method=="GET": obj1=models.Img.objects.all() return render(request,"upload.html",{"url_list":obj1}) elif request.method=="POST": obj=request.FILES.get("fafafa") print(obj.name,obj.size) user=request.POST.get("user") fafafa=request.POST.get("fafafa") print(user,fafafa) new_src = os.path.join("static", "upload", obj.name) f=open(new_src,"wb") for chunk in obj.chunks(): f.write(chunk) f.close() models.Img.objects.create(imgsrc=new_src) ret["status"]=True ret["path"]=new_src print(new_src) if ret["status"]: return HttpResponse(json.dumps(ret)) else: return redirect("/upload.html")
