服务端程序：
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(‘img‘) 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