Three ways to send files using Ajax and how to preview images, upload button landscaping

Back-end Code

defUpload (Request):ifRequest.method = ="GET":        returnRender (Request,'upload.html')    ifRequest.method = ="POST":        PassdefUpload_file (Request): request. Post.get ('username') Fafafa= Request. Files.get ('Fileobj') Img_path= Os.path.join ('static/img/', Fafafa.name) with open (Img_path,'WB') as F: forIteminchfafafa.chunks (): F.write (item) RET= {'Code': True,'Data': Img_path}returnHttpResponse (Json.dumps (ret))

views.py

HTML file

<! DOCTYPE html>"en">"UTF-8"> <title>Title</title> <style>. c1 {position:relative;            width:100px;            height:30px; Text-Align:center; Line-height:30px; Border-radius:50%;            }. c2 {position:absolute;            width:100px;            height:30px; Z-index:10;            opacity:0;            top:0;            bottom:0;            right:0;        left:0; }. c3 {Display:inline-Block; Background-Color:blue;            Color:white; Z-index:9;            Position:absolute;            top:0;            bottom:0;            right:0;        left:0; }    </style>class="C1"> <inputclass="C2"Type="file"Id="File11"Name="file1"/> <aclass="C3"> Upload </a></div>"Button"Value="XML Submission"onclick="xhrsunbmit ();">"Button"Value="jquery Submission"onclick="jqsunbmit ();">"Form1"action="/upload_file/"Method="POST"Enctype="Multipart/form-data"target="IFM1">        {% Csrf_token%}        <iframe id="IFM1"Name="IFM1"style="Display:none;"></iframe> <input type="file"Name="Fileobj"Onchange="Changeupalod ();"/>{#<input type= "Submit" onclick= "Iframesubmit ();" value= "form commits"/>#}</form><div id="Preview"></div><script src="/static/jquery.js"></script><script src="/static/jquery.cookie.js"></script><script>function Xhrsunbmit () {var file_obj= document.getElementById ('File11'). Files[0]; var fd=new FormData (); Fd.append ('username','Root'); Fd.append ('Fileobj', File_obj); var xhr=new XMLHttpRequest (); Xhr.open ('POST','/upload_file/', True); Xhr.setrequestheader ("X-csrftoken", $.cookie ('Csrftoken')); Xhr.onreadystatechange=function () {if(Xhr.readystate = = 4) {var obj=Json.parse (Xhr.responsetext);            Console.log (obj);        }        };    Xhr.send (FD); } function Jqsunbmit () {var file_obj= document.getElementById ('File11'). Files[0]; var fd=new FormData (); Fd.append ('username','Root'); Fd.append ('Fafafa', File_obj); $.ajax ({URL:'/upload_file/', type:'POST', headers: {'X-csrftoken': $.cookie ('Csrftoken')}, DATA:FD, Processdata:false,Tell JQuery notto process the data contenttype:false,Tell JQuery notto set ContentType success:function (ARG, a1, A2) {console.log (ARG);                Console.log (A1);            Console.log (A2); }})} function Changeupalod () {$ ('#ifm1'). Load (function () {var text= $('#ifm1'). Contents (). Find ('Body'). text (); var obj=json.parse (text); $('#preview'). empty (); var Imgtag= Document.createelement ('img'); IMGTAG.SRC="/"+Obj.data; $('#preview'). Append (Imgtag);            }); $('#form1'). Submit (); } /*function Iframesubmit () {$ ('#ifm1'). Load (function () {var text= $('#ifm1'). Contents (). Find ('Body'). text (); var obj=json.parse (text); $('#preview'). empty (); var Imgtag= Document.createelement ('img'); IMGTAG.SRC="/"+Obj.data; $('#preview'). Append (Imgtag); })        }*/</script></body>upload.html
Three ways to send files using Ajax and how to preview images, upload button landscaping