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. 剑指Offer的学习笔记（C#篇）-- 左旋转字符串

    题目描述 汇编语言中有一种移位指令叫做循环左移(ROL),现在有个简单的任务,就是用字符串模拟这个指令的运算结果.对于一个给定的字符序列S,请你把其循环左移K位后的序列输出.例如,字符序列S=”abc ...

  2. 使用python批量造测试数据

    # -*- coding:utf-8 -*- import json import os import time class Virtual_Data: def __init__(self): sel ...

  3. tomcat web的URL解析（web.xml）

    1.一个tomcat可以配置多个host: 2.一个host可以包含多个应用:context: 3.一个应用可以包含多个servlet:servlet-path; 4.一个servlet可以包含多个r ...

  4. 直接插入排序Straight_Insertion_Sort

    基本思想:简单排序的一种.如果玩过扑克牌应该都知道顺子,这时有一把顺子但是顺序是乱的,你要去按顺序整理.那第二张牌和第一张牌比较,调整顺序后前两张牌就是有序的,接着第三张牌插入前两张的有序列中,形成三 ...

  5. WCF错误处理

    介绍 WCF(Windows Communication Foundation) -异常处理:一般Exception的处理,FaultException和FaultException<T> ...

  6. Python中正则匹配使用findall,捕获分组(xxx)和非捕获分组(?:xxx)的差异

    转自:https://blog.csdn.net/qq_42739440/article/details/81117919 下面是我在用findall匹配字符串时遇到的一个坑,分享出来供大家跳坑. 例 ...

  7. ZrOJ #882. 画画

    最后染成的图形一定一样的. 那么只用考虑两条路径在那些地方重合,重合的地方可以交换,这样答案就是2的重合次数次方.直接模拟就行了. qiang- CODE #include <bits/stdc ...

  8. 【题解】间隔排列-C++

    题目Description小Q是班长.在校运动会上,小Q班要进行队列表演.小Q要选出2*N名同学编队,每人都被编上一个号,每一个从1到N的自然数都被某2名同学佩戴,现在要求将他们排成一列,使两个编号为 ...

  9. MySQL B+树 的插入与删除

    一.MySQL Index 的插入 有如下B+树,其高度为2,每页可存放4条记录,扇出为5.所有记录都在叶子节点上, 并且是顺序存放,如果用户从最左边的叶子节点开始顺序遍历,可以得到所有简直的顺序 排 ...

  10. leetcode解题报告（10）：Merge Two Sorted Lists

    描述 Merge two sorted linked lists and return it as a new list. > The new list should be made by sp ...