File Upload---form form, ajax,jquery

Service-Side program:

Import Tornado.webimport osimg_list=[]classIndexhandler (Tornado.web.RequestHandler): DefGet(self): Self.render ('index.html', list_img=img_list) def post (self,*args, * *Kwargs): Name=self.get_argument ('name') PWD=self.get_argument ('pwd') #fn=self.get_argument ('img') File_meta=self.request.files['img']         forMetainchFile_meta:file_name=meta['filename'] File_path=os.path.join ('img', file_name); Img_list.append (File_path) with open (Os.path.join ('Static', File_path),"WB") asFp:fp.write (meta['Body']) Self.write ('{"Status": 1, "message": "MMM"}') Settings={    'Template_path':' views',    'Static_path':'Static',    'Static_url_path':'SSS'}application=Tornado.web.Application ([(R"/index", Indexhandler),],**settings)if__name__=="__main__": Application.listen (8080) tornado.ioloop.IOLoop.instance (). Start ()

View Code

Form form: Note plus enctype= "Multipart/form-data"

<form action="/index"Method="Post"Enctype="Multipart/form-data"> <input type="text"Name="name"/> <input type="text"Name="pwd"> <input type="file"Name="img"Id="img"> <input type="Submit"> </form>

JS uses Ajax uploads:

    <button onclick="uploadfile (); ">ajax uploading Files </button>

function UploadFile () {//get File Object        varFileobj=document.getelementbyid ("img"). files[0]; //To create a form form object        varform=NewFormData (); Form.append ('name', document.getElementsByTagName ('input')[0].value); Form.append ('pwd', document.getElementsByTagName ('input')[1].value); Form.append ('img', Fileobj); varXhr=NewXMLHttpRequest (); Xhr.open ('Post','/index',true);    Xhr.send (form); }

jquery Upload file:

    <button onclick="uploadFile2 (); ">jquery uploading Files </button>

function UploadFile2 () {//get the File object first        varfileobj=$ ("#img")[0].files[0]; varform=NewFormData (); Form.append ('name', document.getElementsByTagName ('input')[0].value); Form.append ('pwd', document.getElementsByTagName ('input')[1].value); Form.append ('img', Fileobj); $.ajax ({type:'Post', URL:'/index', Data:form, ProcessData:false, ContentType:false, DataType:'text', Success:function (data) {Console.log (data); }        })    }

Among the main notes:

processDataSet to false . Because the data value is an FormData object, you do not need to process the data.

ProcessData
Type: Boolean
Default value: True. By default, the data option is passed in, and if it is an object (technically, as long as it is not a string), it will be processed into a query string to match the default content type "application/x-www-form-urlencoded". Set to False if you want to send DOM tree information or other information that you do not want to convert.

contentTypeSet to false . This is set to false because it is an <form> object constructed by the form, and the FormData property has already been declared. enctype="multipart/form-data"

In jquery Ajax, ContentType is the default value: Application/x-www-form-urlencoded, which is characterized by the Name/value becoming a group of & joins between each group, and The name and value are used = connected.

Do not need to set the appropriate use False

iframe: Upload almost all browsers compatible

"UTF-8"> <title>Title</title> <style>. hide{Display:none; }    </style> <script src="{{Static_url (' Js/jquery.js ')}}"></script>"My_form"action="/index"Method="POST"Enctype="Multipart/form-data"> <div id="Main"> <input name="name"Type="text"/> <input name="pwd"Type="text"/> <input name="img"Id="img"Type="file"/> <input type="Button"Name="Action"Value="Upload"onclick="redirect ();"> <iframe id="My_iframe"Name="My_iframe"Src="" class="Hide"></iframe> </div> </form></body>
<script>function Redirect () {document.getElementById ("My_iframe"). onload=Test (); //target--> Target Submission Location Iframe,iframe Submission page does not refreshdocument.getElementById ('My_form'). target='My_iframe'; document.getElementById ('My_form'). Submit (); } function Test () {vart=$ ("#my_iframe"). Contents (). Find ('Body'). text ();    Console.log (t); }</script>
Given a JQuery object that represents a collection of DOM elements, the. Contents () method allows us to retrieve the direct child nodes of these elements in the DOM tree and construct a new JQuery object with matching elements: similar to the contents () and. Children () methods, the difference is The former contains text nodes and HTML elements in the resulting JQuery object.
The. Contents () method can also be used to obtain a content document for an IFRAME, provided that the IFRAME is in the same domain as the main page. and children () cannot be used in an IFRAME
File Upload---form form, ajax,jquery