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. PHP中将二维数组 转换成字符串

    function arr_to_str($arr) { $t ='' ; foreach ($arr as $v) { $v = join(",",$v); // 可以用implo ...

  2. ZZNU-OJ-2098 : Drink coffee【线段树合并区间或者 差分 + 二分索引树】

    : Drink coffee 时间限制: Sec 内存限制: MiB 提交: 答案正确: 提交 状态 讨论区 题目描述 为了在上课时保持清醒,凯伦需要一些咖啡.咖啡爱好者凯伦想知道最佳的温度来冲煮完美 ...

  3. Python+requests r.json()获取的内容，控制台显示中文Unicode转为utf-8《九》

    在接口测试中,直接使用r.json()获取到的结果,难免会在结果中带有中文,但是在控制台的中文输出默认是Unicode编码,不能通过统一在设置中进行设置utf-8,因此为了在控制台更显而易见的显示出中 ...

  4. eclipse中toolbar位置的系统URI

    org.eclipse.ui.ide.IIDEActionConstants 这个类里存了系统toolbar,菜单等URI 定义自己的toolbar或者menu时,指定位置after=addition ...

  5. [2019年湘潭大学程序设计竞赛（重现赛）H chat][背包dp]

    链接:https://ac.nowcoder.com/acm/contest/893/H来源:牛客网 题目描述 在Casya生活的世界里,一天由m个小时组成. 最近Casya的女神终于答应在接下来的n ...

  6. QPS 和 TPS

  7. E:only-child

    E:only-child 语法: E:only-child { sRules } 说明: 匹配父元素仅有的一个子元素E.大理石机械构件维修 要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高 ...

  8. Excel2013下拉框选择自动填充颜色

    图一写判断公式,图二选择应用范围.

  9. JavaWeb_(Mybatis框架)MyBatis Generator简单入门

    官方文档 传送门 下载地址 传送门 MyBatis Generator(MBG)简介: MyBatis Generator(MBG)是MyBatis MyBatis 和iBATIS的代码生成器.它将为 ...

  10. elasticsearch java动态设置mapping并指定分词器

    //创建索引 client.admin().indices().prepareCreate("twitter").execute().actionGet(); //配置mappin ...