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. 用js刷剑指offer(用两个栈实现队列)

    题目描述 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 牛客网链接 js代码 let stack1 = [] let stack2 = [] function ...

  2. linux 、 CentOs ---> 环境变量设置

    Linux下环境变量设置 1.在Windows 系统下,很多软件安装都需要配置环境变量,比如 安装 jdk ,如果不配置环境变量,在非软件安装的目录下运行javac 命令,将会报告找不到文件,类似的错 ...

  3. mybatise 设置全局变量实例

    前言 在平时的工作中有时候是需要在配置文件中配置全局变量的,因为这些东西是不会变的,并且每个mapper都传参的话也显得有点繁琐,还好mybatis本身是支持全局变量的,今天工作中用到了,记录一下. ...

  4. Java字节码常量池深入剖析

    继续来分析Java字节码,上一节分析了魔数的规则,接下来继续往下分析,其上次总结的规则也一起贴出来: 1.使用javap -verbose命令分析一个字节码文件时,将会分析该字节码文件的魔数.版本号. ...

  5. 1121 Django基本

    目录 Django前戏 一.课程导读 1.web应用 2.c/s b/s 架构 3.Python Web框架 二.原生socket服务 三.http协议 什么是http协议 四大特性 http工作原理 ...

  6. 《流畅的Python》Object References, Mutability, and Recycling--第8章

    Object References, Mutability, and Recycling 本章章节: Variables Are Not Boxes identity , Equality ,  Al ...

  7. js-虚拟dom

    问题: vdom是什么?为什么存在vdom? vdom是如何应用的,核心的api是什么? 介绍一下diff算法 1.一些虚拟dom应用了snabbdom.其中的 h函数相当于渲染成了右侧的JS虚拟节点 ...

  8. 号外号外！WPF界面开发者福音，DevExpress支持.NET Core 3.0！

    通过DevExpress WPF Controls,你能创建有着强大互动功能的XAML基础应用程序,这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案. 无论是Office办公软件的衍 ...

  9. Linux文件删除的原理

    Linux文件iNode和block是否删除是通过  i_link  和 i_count 的计数值来判断的.只有i_count  和 I_link 同时为0 的 时候,文件的 iNode和block才 ...

  10. trie上构建后缀数组

    例题: 往事太多,有时候忘了就忘了吧. 如果有非记不可的,就只能用点附加手段啦! 我们定义一棵往事树是一个 n 个点 n-1 条边的有向无环图,点编号为 1到 n,其中 1 号点被称为是根结点,除根结 ...