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. mongodb文件

    https://github.com/mongodb/mongo/tree/master  或 https://www.mongodb.com/download-center?jmp=nav#comm ...

  2. nagios安装部署及详细配置说明(转)

    一.Nagios简介 Nagios是一款开源的电脑系统和网络监视工具,能有效监控Windows.Linux和Unix的主机状态,交换机路由器等网络设置,打印机等.在系统或服务状态异常时发出邮件或短信报 ...

  3. Qt中使用匿名函数lambda表达式

    一.为什么要使用匿名函数lamdba 首先,lambda表达式可以使代码变得简单,C++中,一个lambda表达式表示一个可调用的代码单元.如代码: #include <QCoreApplica ...

  4. virtualBox+centOS的一些报错

    step1: 安装系统后进入命令行模式 安装virtualBox:https://www.virtualbox.org/wiki/Downloads 下载centOS7镜像:https://www.c ...

  5. SVN(subversion )服务端和客户端的下载安装使用

    SVN(subversion)官方网站: http://subversion.apache.org/packages.html 一.服务端下载 1.百度搜关键字:subversion  进入subve ...

  6. BZOJ 4129 Haruna’s Breakfast ( 树上带修莫队 )

    题面 求树上某路径上最小的没出现过的权值,有单点修改 添加链接描述 分析 树上带修莫队板题,问题是怎么求最小的没出现过的权值. 因为只有nnn个点,所以没出现过的最小值一定在[0,n][0,n][0, ...

  7. jQuery和原生JS的对比

    原生JS的缺点: 不能添加多个入口函数(window.onload),如果添加了多个,后面的会把前面的覆盖掉 原生js的api名字太长,难以书写,不易记住 原生js有的代码冗余 原生js中的属性或者方 ...

  8. checkbox选中的行数

    $('[name=roomcheck]').each(function(){ if($(this).prop("checked")==true){ alert(this.id);/ ...

  9. kafka 介绍与使用

    在介绍为什么使用kafka之前,我们有必要来了解一下什么是kafka? 1. 什么是kafka? Kafka是由LinkedIn开发的一个分布式的消息系统,使用Scala编写,它以可水平扩展和高吞吐率 ...

  10. .net大文件上传

    ASP.NET上传文件用FileUpLoad就可以,但是对文件夹的操作却不能用FileUpLoad来实现. 下面这个示例便是使用ASP.NET来实现上传文件夹并对文件夹进行压缩以及解压. ASP.NE ...