文件上传跨域解决方案-jQuery-File-Upload

GIT 下载地址

https://github.com/blueimp/jQuery-File-Upload

亲测HTTPS HTTP跨域无压力

不用自带的DEMO

用下面的DEMO

复制代码
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery File Upload Example</title>
</head>
<style>
    .bar {
        height: 18px;
        background: green;
    }
    .content{
        width: 100%;text-align: center;margin-top: 70px;
    }
    #progress{
        border-radius:6px;width: 300px;background: red;
        margin: 10px auto;
    }
</style>
<body>

<div class="content">
    <input id="fileupload" type="file" name="upfile" ">
    <div id="progress">
        <div class="bar" style="width: 0%;"></div>
    </div>
    <img id="uploadimg" src="__PUBLIC__/images/bg.jpg" width="400px" height="408px"/>
</div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>


$('#fileupload').fileupload({
            url: "",
            type:"POST",
            dataType:"json",
            autoUpload : true,
            acceptFileTypes: /(\.|\/)(jpe?g|png)$/i,
　　　　　　

　　　　　　　　//跨域
　　　　　　　　forceIframeTransport: true,

            formData: {
                action:"UploadVMKImagePath",
                param:JSON.stringify({
                    projectId:12343,
                    fileType:"任务日志图片"
                })
            },

       
            done: function (e, data) {
                console.log(e);
                console.log(data);//data里面包含了服务端返回的字段
            },
            fail:function(e,data){
                console.log("上传失败："+data.errorThrown);
            },

             progressall: function (e, data) {
                        var progress = parseInt(data.loaded / data.total * 100);
                        $('#progress .bar').css(
                            'width',
                            progress + '%'
                        );
                    },

        });



</script>
</body>
</html>
复制代码

 中间遇到的问题是，一旦采用了跨域 就会使用FROM包含 iframe的方式上传，所以在done函数里是无法直接拿到服务器的返回值的。

这个插件定义的是这样 如果采用了iframe方式，必须要设置一个CALL参数，当服务器接受完你的上传数据 回CALL你设置的页面

 redirectParamName:"callUrl",
redirect:"http://"+window.location.host+"/app/callupload.html?",//回调页面

很显然服务端要接受和处理你这个callurl，不过这次的项目中，目标上传服务器的处理完上传后，是直接把数据写到页面的。而不是去CALL什么地址。。

没法。。只有从其他地方下手了。

通过调试发现

既然iframe,上传完成后服务端的返回内容一定iframe里面的。

jquery.iframe-transport.js

在这个文件里的下面代码中可以记录下服务器返回的结果

复制代码
 window.setTimeout(function () {
                                    // Removing the form in a setTimeout call
                                    // allows Chrome's developer tools to display
                                    // the response result
                                    
                                    console.log("【upload-iframe】");
                                        console.log(iframe);
                                    
                                    //form.remove();
                                }, 0);
复制代码
iframe 这个参数在jquery.iframe-transport.js中就定义好了，输出看看就知道了

 

posted @   方东信  阅读(7190)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示