文件上傳---form表單，ajax,jquery
服務端程序：
import tornado.web import os IMG_LIST=[] class IndexHandler(tornado.web.RequestHandler): def get(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(‘View Codeimg‘) file_meta=self.request.files[‘img‘] for meta in file_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") as fp: 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()
form表單：註意加上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使用ajax上傳：
<button onclick="uploadFile();">ajax上傳文件</button>
function uploadFile(){ //獲取文件對象 var fileobj=document.getElementById("img").files[0]; //創建form表單對象 var form=new FormData(); form.append(‘name‘, document.getElementsByTagName(‘input‘)[0].value); form.append(‘pwd‘, document.getElementsByTagName(‘input‘)[1].value); form.append(‘img‘,fileobj); var xhr=new XMLHttpRequest(); xhr.open(‘post‘,‘/index‘,true); xhr.send(form); }
jquery上傳文件：
<button onclick="uploadFile2();">jquery上傳文件</button>
function uploadFile2() { //先獲取文件對象 var fileObj=$("#img")[0].files[0]; var form=new FormData(); 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); } }) }
其中主要註意：
processData設置為false。因為data值是FormData對象，不需要對數據做處理。
processData
類型：Boolean
默認值: true。默認情況下，通過data選項傳遞進來的數據，如果是一個對象(技術上講只要不是字符串)，都會處理轉化成一個查詢字符串，以配合默認內容類型 "application/x-www-form-urlencoded"。如果要發送 DOM 樹信息或其它不希望轉換的信息，請設置為 false。
contentType設置為false。因為是由<form>表單構造的FormData對象，且已經聲明了屬性enctype="multipart/form-data"，所以這裏設置為false
在 jquery 的 ajax 中， contentType都是默認的值：application/x-www-form-urlencoded，這種格式的特點就是，name/value 成為一組，每組之間用 & 聯接，而 name與value 則是使用 = 連接。
不需要設置的適合使用false
iframe：上傳幾乎兼容所有瀏覽器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display:none;
}
</style>
<script src="{{static_url(‘js/jquery.js‘)}}"></script>
</head>
<body>
<form id="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>
</html>
<script> function redirect() { document.getElementById("my_iframe").onload=Test(); //target-->目標提交地點iframe,iframe提交頁面不刷新 document.getElementById(‘my_form‘).target=‘my_iframe‘; document.getElementById(‘my_form‘).submit(); } function Test() { var t=$("#my_iframe").contents().find(‘body‘).text(); console.log(t); } </script>
如果給定表示 DOM 元素集合的 jQuery 對象，.contents() 方法允許我們檢索 DOM 樹中的這些元素的直接子節點，並用匹配元素構造新的 jQuery 對象。.contents() 和 .children() 方法類似，不同的是前者在結果 jQuery 對象中包含了文本節點以及 HTML 元素。
.contents() 方法也可以用於獲得 iframe 的內容文檔，前提是該 iframe 與主頁面在同一個域。而children()不能用於iframe
文件上傳---form表單，ajax,jquery