文件上传---form表单，ajax,jquery,以及iframe无刷新上传 （processData，contentType讲解）
服务端程序：
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。
补充：在Django下：
data:{a:1,b:2,csrfmiddlewaretoken:'{{ csrf_token }}'},
默认获取为：processData：true
<QueryDict: {u'a': [u'1'], u'csrfmiddlewaretoken': [u'darHnLiXqB0f4r25nenCAsNdMhT1ms3qTes1l8c509Lu7uWeGg4IBCZXmLpXKkzW'], u'b': [u'2']}>
processData:false
此时：获取数据类型为 <QueryDict: {u'[object Object]': [u'']}>
相对于：
processData声明当前的data数据是否进行转码或预处理，默认为true，即预处理； # 如果为false,那么对data：{a:1,b:2}会调用json对象的toString()方法，即{a:1,b:2}.toString() # ,最后得到一个［object，Object］形式的结果。
#如果为false,会将未处理的数据（类型为对象）传递过去，而且没有对应的值，只有该对象，所以会在服务器获得{u'[object Object]': [u'']}样式的数据 # {"1":"111","2":"222","3":"333"}.toString();//[object Object] # 该属性的意义在于，当data是一个dom结构或者xml数据时，我们希望数据不要进行处理，直接发过去， # 就可以讲其设为true。
补错：ajax对于post传输数据的处理方法并不是简单的toString,而是其他方法：参见源码：
s = jQuery.ajaxSetup( {}, options ), // Convert data if not already a string if ( s.data && s.processData && typeof s.data !== "string" ) { s.data = jQuery.param( s.data, s.traditional ); #traditional是否允许传递迭代数据 }
所以我们测试processData时可以使用：
正常使用：
function send_ajax(){ console.log(tt) $.ajax({ type:'POST', url:'/get_ajax', data:{a: 1, b: 2, csrfmiddlewaretoken: '{{ csrf_token }}'}, processData:true, #默认为true，会对上面的data对象进行处理，转换为字符串 dataType:'text', success:function(data){ console.log(data); } }) }
稍作处理：我们自己对对象数据进行处理，转换为字符串，不需要非得将processData设置为true，也可以将数据传递过去(不需要注释掉settings.py中'django.middleware.csrf.CsrfViewMiddleware',了，也可以传递过去)
function send_ajax(){ tt = {a: 1, b: 2, csrfmiddlewaretoken: '{{ csrf_token }}'}; tt = jQuery.param( tt, false ); console.log(tt)
//a=1&b=2&csrfmiddlewaretoken=Pd6dDAurbbEemf5B6UGUrlAlXvE3BWY6zWA4yeCPR9jbwNuqb62u3OZvuhL5RAff $.ajax({ type:'POST', url:'/get_ajax', data:tt, processData:false, dataType:'text', success:function(data){ console.log(data); } }) }
contentType设置为false。因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false
在 jquery 的 ajax 中， contentType都是默认的值：application/x-www-form-urlencoded，这种格式的特点就是，name/value 成为一组，每组之间用 & 联接，而 name与value 则是使用 = 连接。
不需要设置的适合使用false
contentType：默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。 # 用来指明当前请求的数据编码格式；urlencoded:?a=1&b=2；如果想以其他方式提交数据， # 比如contentType:"application/json"，即向服务器发送一个json字符串： # $.ajax("/ajax_get",{ # # data:JSON.stringify({ # a:22, # b:33 # }), # contentType:"application/json", # type:"POST", # # }); //{a: 22, b: 33} # 注意：contentType:"application/json"一旦设定，data必须是json字符串，不能是json对象
traditional:允许传递迭代数据：
traditional：一般是我们的data数据有数组时会用到 ：data:{a:22,b:33,c:["x","y"]},
traditional为false会对数据进行深层次迭代；
更多参数请看：http://jquery.cuishifeng.cn/jQuery.Ajax.html
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'; #这里可以直接写在HTML中，在form中添加上target="my_iframe"即可 document.getElementById('my_form').submit(); } function Test() { var t=$("#my_iframe").contents().find('body').text(); #表单提交以后会触发test函数，这里去获取服务端回送的数据
//var t=this.contentWindow.document.body.innerHtml; 也可以 console.log(t);
var content=this.contentWindow.document.body.innerHTML; var obj = JSON.parse(content); #服务器发送过来的是json数据，包含自定义状态码，图片路径 var tag = document.createElement("img"); tag.src = obj.data; #data中是图片路径 $("#my_iframe").empty().append(tag); #先清空原来数据，在加入新的标签
}
</script>