<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <p>

        <input type="button" onclick="Jsonp1();"  value='提交'/>

    </p>

    <p>

        <input type="button" onclick="Jsonp2();" value='提交'/>

    </p>

    <script type="text/javascript" src="jquery-1.12.4.js"></script>

    <script>

        function Jsonp1(){

            var tag = document.createElement('script');

            tag.src = "http://c2.com:8000/test/";

            document.head.appendChild(tag);

            document.head.removeChild(tag);

        }

        function Jsonp2(){

            $.ajax({

                url: "http://c2.com:8000/test/",

                type: 'GET',

                dataType: 'JSONP',

                success: function(data, statusText, xmlHttpRequest){

                    console.log(data);

                }

            })

        }

    </script>

</body>

</html>

基于JSONP实现跨域Ajax - Demo

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .upload{

            display: inline-block;padding: 10px;

            background-color: brown;

            position: absolute;

            top: 0;

            bottom: 0;

            right: 0;

            left: 0;

            z-index: 90;

        }

        .file{

            width: 100px;height: 50px;opacity: 0;

            position: absolute;

            top: 0;

            bottom: 0;

            right: 0;

            left: 0;

            z-index: 100;

        }

    </style>

</head>

<body>

    <div style="position: relative;width: 100px;height: 50px;">

        <input class="file" type="file" id="fafafa" name="afafaf" />

        <a class="upload">上传</a>

    </div>

    <input type="button" value="提交XHR" onclick="xhrSubmit();" />

    <input type="button" value="提交jQuery" onclick="jqSubmit();" />

    <hr/>

    <form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">

        <iframe id="ifm1" name="ifm1" style="display: none;"></iframe>

        <input type="file" name="fafafa" onchange="changeUpalod();" />

{#        <input type="submit" onclick="iframeSubmit();" value="Form提交"/>#}

    </form>

    <div id="preview"></div>

    <script src="/static/jquery-1.12.4.js"></script>

    <script>

        //只要加入了文件，就会触发事件，并把整个表单都提交过去。就不用点击submit提交都行！！！！

            //因为在这个函数里面写了submit() 提交表单操作

        //什么时候返回过来，就会执行iframe的load事件，

            //所以在这些绑定了load事件,用户只要一提交，上传成功了，就会把路径(static --这里是在views中做了逻辑处理返回了路径)给你返回来，然后找到这个文件，在放到id=id="preview" 中

        function changeUpalod(){

            $('#ifm1').load(function(){

            //console.log$($('#ifm1').contents())  这contents 就是它下面的值

            //$('#ifm1').contents().find('body').text(); 得到它的文本内容

                var text = $('#ifm1').contents().find('body').text();

                var obj = JSON.parse(text);

                $('#preview').empty();

                var imgTag = document.createElement('img');

                imgTag.src = "/" + obj.data;

                $('#preview').append(imgTag);

            });

            $('#form1').submit(); //找到form1 直接就提交这个表单

        }

        //用ajax发送

            //如果用ajax来发送文件,jquery会帮你把文件转换为字符串等等操作.这样就违背了咱传输文件的意图

            //所以需要加2个参数

            // processData: false,

            // contentType: false,

            //加上这2个参数，就是告诉jquery，不要帮我做特殊处理.

        function jqSubmit(){

            // $('#fafafa')[0]

            //你要上传的文件对象  文件只能用这种方式

            var file_obj = document.getElementById('fafafa').files[0];

            var fd = new FormData();   //相当于是一个form表单

            fd.append('username','root');  //前面加KEY，后面加value

            fd.append('fafafa',file_obj);

            $.ajax({

                url: '/upload_file/',

                type: 'POST',

                data: fd,

                processData: false,  // tell jQuery not to process the data

                contentType: false,  // tell jQuery not to set contentType

                //success 也就是返回值

                success:function(arg,a1,a2){

                    console.log(arg);

                    console.log(a1);

                    console.log(a2);

                }

            })

        }

        //这个是原生的发送

        function xhrSubmit(){

            // $('#fafafa')[0]

            var file_obj = document.getElementById('fafafa').files[0];

            var fd = new FormData();

            fd.append('username','root');

            fd.append('fafafa',file_obj);

            var xhr = new XMLHttpRequest();

            xhr.open('POST', '/upload_file/',true);

            xhr.onreadystatechange = function(){

                if(xhr.readyState == 4){

                    // 接收完毕

                    var obj = JSON.parse(xhr.responseText);

                    console.log(obj);

                }

            };

            xhr.send(fd);

        }

        //iframe 兼容性最好

        function iframeSubmit(){

            $('#ifm1').load(function(){

                var text = $('#ifm1').contents().find('body').text();

                var obj = JSON.parse(text);

                $('#preview').empty();

                var imgTag = document.createElement('img');

                imgTag.src = "/" + obj.data;

                $('#preview').append(imgTag);

            })

        }

    </script>

</body>

</html>