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

                                }, );
iframe 这个参数在jquery.iframe-transport.js中就定义好了，输出看看就知道了

文件上传跨域解决方案-jQuery-File-Upload的更多相关文章

  1. .net文件上传，客户端用jquery file upload

    <%@ WebHandler Language="C#" Class="Handler" %> using System; using System ...

  2. 文件上传报错：Unknown: file created in the system's temporary directory

    nginx+php下文件上传成功,但会有错误提示如下: <b>Notice</b>:  Unknown: file created in the system's tempor ...

  3. springmvc文件上传 参数为MultipartFile 转换为File

    package cn.com.mcd.controller;import java.io.File;import java.io.IOException;import java.io.Serializ ...

  4. SpringBoot文件上传异常之提示The temporary upload location xxx is not valid

    原文: 一灰灰Blog之Spring系列教程文件上传异常原理分析 SpringBoot搭建的应用,一直工作得好好的,突然发现上传文件失败,提示org.springframework.web.multi ...

  5. UEditor单图上传跨域问题解决方案

    UEditor UEditor是百度团队提供的富文本编辑器 git地址为:https://github.com/fex-team/ueditor 在最近的项目中使用了该插件作为项目的富文本编辑器 由于 ...

  6. kindedit,uedit 上传跨域返回

    1.kindedit 跨域上传图片的时候,a.com 上传到b.com接收图片服务器,然后返回图片地址. 2.一般如果不做任何处理是获取不到返回的信息的.原因是跨域了 3.所以一般在上传成功后,在跳转 ...

  7. Win2008或IIS7的文件上传大小限制解决方案

    默认情况下,IIS7的上传限制为200K.当上传文件小于30M时,可以通过如下方法设置:在iis7中找到asp设置,在“asp”的“限制属性”中最后一行“最大请求主体限制”,修改该值为你所想要的,如2 ...

  8. 在系统下文件上传报错：The temporary upload location [/tmp/tomcat.xxx/work/Tomcat/localhost/ROOT] is not valid

    线上的系统中长时间不访问时不能上传文件了,出现如下错误: 2019-03-11 23:37:42.741 ERROR 66505 --- [nio-8081-exec-3] o.a.c.c.C.[.[ ...

  9. springboot 文件上传 java.io.IOException: The temporary upload location [/tmp/xx] is not valid

    转自:http://meia.fun/article/1541578061808 首先分析下出现问题的原因:linux 下的 /tmp 目录,是用来存储由各种程序创建的临时文件的地方.一些配置,导致系 ...

随机推荐

  1. PaaS容器集群优化之路

    1. 性能优化面对的挑战 以下是整个PaaS平台的架构 其中主要包括这些子系统: 微服务治理框架:为应用提供自动注册.发现.治理.隔离.调用分析等一系列分布式/微服务治理能力,屏蔽分布式系统的复杂度. ...

  2. [USACO07MAR]面对正确的方式Face The Right Way

    题目概括 题目描述 Farmer John has arranged his N (1 ≤ N ≤ 5,000) cows in a row and many of them are facing f ...

  3. flink相关

    flink一.简单实时计算方案 假如现在我们有一个电商平台,每天访问的流量巨大,主要访问流量都集中在衣服类.家电类页面,那么我们想实时看到这两类页面的访问量走势(十分钟出一个统计量),当做平台的重要指 ...

  4. 2018/7/31-zznu-oj-问题 F: 手机密码--【裸dfs+for循环即可！——据说三个小时内只有两个人读完了题意并轻松AC了】

    问题 F: 手机密码 时间限制: 1 Sec  内存限制: 128 MB提交: 41  解决: 23[提交] [状态] [讨论版] [命题人:admin] 题目描述 手机安全问题是大家经常关心的一个问 ...

  5. win10 专业版永久密钥

    激活码/密匙: 1.专业版: W269N-WFGWX-YVC9B-4J6C9-T83GXMH37W-N47XK-V7XM9-C7227-GCQG92X7P3-NGJTH-Q9TJF-8XDP9-T83 ...

  6. React中setState的怪异行为 ——setState没有即时生效

    setState可以说是React中使用频率最高的一个函数了,我们都知道,React是通过管理状态来实现对组件的管理的,当this.setState()被调用的时候,React会重新调用render方 ...

  7. 数字pid笔记（2）

    void pid_Cal(void) { //float index = 0; IncPid * p = NULL; p = &g_PID_Inc; p->SetVal = sys_pa ...

  8. gRPC 到 JSON 代理生成器 grpc-gateway

    grpc-gateway是protoc的插件,它读取protobuf服务定义并生成反向代理服务器,该服务将RESTful HTTP API转换为gRPC. 这个服务是根据你的服务定义中的google. ...

  9. python大战EXCEL--xlwings

    xlwings的特色 xlwings能够非常方便的读写Excel文件中的数据,并且能够进行单元格格式的修改 可以和matplotlib以及pandas无缝连接 可以调用Excel文件中VBA写好的程序 ...

  10. CF788B Weird journey 欧拉路径+计数

    给定一张 $n$ 个点 $m$ 条无向边的图(无重边) :定义一种行走方案为:$m-2$ 条边走 $2$ 次,其余 $2$ 条边只走一次. 两个行走方案不同,当且仅当走一次的两条边中有不同的. 一条边 ...