文件上传---form表单，ajax,jquery,以及iframe无刷新上传 （processData，contentType讲解）

时间：2020-12-12 16:42:21

服务端程序：

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()

    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[];

        //创建form表单对象

        var form=new FormData();

        form.append('name', document.getElementsByTagName('input')[].value);

        form.append('pwd', document.getElementsByTagName('input')[].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")[].files[];

        var form=new FormData();

        form.append('name', document.getElementsByTagName('input')[].value);

        form.append('pwd', document.getElementsByTagName('input')[].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:,b:,csrfmiddlewaretoken:'{{ csrf_token }}'},

默认获取为：processData：true

<QueryDict: {u'a': [u''], u'csrfmiddlewaretoken': [u'darHnLiXqB0f4r25nenCAsNdMhT1ms3qTes1l8c509Lu7uWeGg4IBCZXmLpXKkzW'], u'b': [u'']}>
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: , b: , 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: , b: , 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=&b=；如果想以其他方式提交数据，

             # 比如contentType:"application/json"，即向服务器发送一个json字符串：

             #   $.ajax("/ajax_get",{

             #

             #      data:JSON.stringify({

             #           a:,

             #           b:

             #       }),

             #       contentType:"application/json",

             #       type:"POST",

             #

             #   });                          //{a: 22, b: 33}

             # 注意：contentType:"application/json"一旦设定，data必须是json字符串，不能是json对象

traditional:允许传递迭代数据：

 traditional：一般是我们的data数据有数组时会用到 ：data:{a:,b:,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); #先清空原来数据，在加入新的标签

iframe显示图片

    }

</script>

如果给定表示 DOM 元素集合的 jQuery 对象，.contents() 方法允许我们检索 DOM 树中的这些元素的直接子节点，并用匹配元素构造新的 jQuery 对象。.contents() 和 .children() 方法类似，不同的是前者在结果 jQuery 对象中包含了文本节点以及 HTML 元素。

.contents() 方法也可以用于获得 iframe 的内容文档，前提是该 iframe 与主页面在同一个域。而children()不能用于iframe

相关文章