以前做无刷新上传，都要用iframe，如果想有进度条，就千难万难，不得不用flash等插件来实现。

现在HTML5终于普及了，筒子们不用再那么痛苦了。

所有这一切都变得异常简单！！

不信？且看如下代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>test formdata upload</title>

    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>

    <script type="text/javascript">

        var onProgress = function (e) {

            if (e.lengthComputable) {

                document.getElementById("progressBar").style.width = Math.round(e.loaded * 100 / e.total) + 'px';

            }

        };

        $(function () {

            $('#uploadBtn').on('click', function () {

                var fdata = new FormData();

                fdata.append('file', $('#testFile')[0].files[0]);

                var xhr = new XMLHttpRequest();

                //xhr.onprogress = onProgress; //下载监听

                xhr.upload.onprogress = onProgress; //上传监听

                xhr.open("POST", "http://192.168.2.152:89/api/values", true);

                xhr.send(fdata);

                return false;

            });

        });

    </script>

</head>

<body>

    <div style="width:600px;margin:10px auto;background-color:#fff;">

        <input type="file" id="testFile" name="testFile" multiple="multiple" />

        <div id="progressBar" style="background-color:#ccf;height:8px;width:0px;border-radius:3px;border:0px;"></div>

        <input id="uploadBtn" type="button" value="submit" />

    </div>

</body>

</html>

webapi后台代码：

        public string Post()

        {

            if (request.Files.Count > 0)

            {

                var file = request.Files[0];

                var fileName = file.FileName.Substring(file.FileName.LastIndexOf('.'));

                file.SaveAs("D:\\log\\upload\\" + fileName);

            }

            return "ok";

        }

注意事项：

1. webapi的webconfig添加如下内容，你懂的：

  <system.webServer>

    <httpProtocol>

      <customHeaders>

        <add name="Access-Control-Allow-Origin" value="*" />

        <add name="Access-Control-Allow-Headers" value="*" />

        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />

      </customHeaders>

    </httpProtocol>

  <system.webServer>

2.webapi一定要发布后才能正常使用，否则chrome会报405错误，我就是在这点上被整了一整天。。。。我擦。。。。

另外，这里有一个没有解决的不算问题的问题，心有不甘，还是希望能有人帮我解决它：

就是这个代码，在chrome和firefox浏览器里执行时，会发送两个请求，第一个是个options请求，第二个才是正常的post请求，

请问有没有大侠知道如何去掉第一个options请求啊？？？？

采用formdata做跨域的、无刷新、带进度条的文件上传的更多相关文章

  1. HTML5利用FormData对象实现显示进度条的文件上传

    摘自:https://blog.csdn.net/q1056843325/article/details/53759963 自己做是按这个实现的,兼容性还不错 完整简约的解决方案 下面的代码清单是包括 ...

  2. 文件上传跨域解决方案-jQuery-File-Upload

    GIT 下载地址 https://github.com/blueimp/jQuery-File-Upload 亲测HTTPS HTTP跨域无压力 不用自带的DEMO 用下面的DEMO <!DOC ...

  3. js 无刷新文件上传 (兼容IE9 )

    之前项目中有个文件上传了需求,于是直接就使用了FormData对象异步上传,但是在测试得时候发现ie9无法正常上传(项目要求兼容IE9+),无奈,查资料得知IE9- 版本不支持formdata对象得异 ...

  4. 关于使用Jsonp做跨域请求

    今天在使用Jsonp做跨域请求的练习时碰上这样一个问题 代码如下 <!DOCTYPE html> <html> <head> <meta charset=&q ...

  5. 使用PHP和HTML5 FormData实现无刷新文件上传教程

    无刷新文件上传是一个常见而又有点复杂的问题,常见的解决方案是构造 iframe 方式实现. 在 HTML5 中提供了一个 FormData 对象 API,通过 FormData 可以方便地构造一个表单 ...

  6. 用django-cors-headers做跨域

    什么是CORS? CORS(跨域资源共享,Cross-Origin Resource Sharing)是一种跨域访问的机制,可以让Ajax实现跨域访问. 其实,在服务器的response header ...

  7. Javascrpt无刷新文件上传

    最近工作中遇到上传文件问题,主要需求是一步点击上传,兼容ie8+,当时用的dojox/form/uploader控件,这两天扒了一下源码,明白了原理拿出来分享一下. 总体思路如下: 1.对于支持XML ...

  8. 【JS】ajax 实现无刷新文件上传

    一.摘要 最近在做个东西,需要实现页面无刷新文件上传,目前看到的方法有两种 1) 通过隐藏iframe 实现页面无刷新,适用于不关心上传结果 <form target="hiddenF ...

  9. jquery无刷新文件上传 解决IE安全性问题

    很多项目中都需要有文件上传的功能,一般文件上传有几种方式,input file表单上传,flash上传. flash就不说了,能接受flash的就用吧. 下面介绍的这种是基于input file控件的 ...

随机推荐

  1. 论文笔记之：Deep Attention Recurrent Q-Network

    Deep Attention Recurrent Q-Network 5vision groups  摘要:本文将 DQN 引入了 Attention 机制,使得学习更具有方向性和指导性.(前段时间做 ...

  2. C# 托管资源与非托管资源

    在.net 编程环境中,系统的资源分为托管资源和非托管资源. 托管资源: Net平台中,CLR为程序员提供了一种很好的内存管理机制,使得程序员在编写代码时不要显式的去释放自己使用的内存资源(这些在先前 ...

  3. ping不通 www.baidu.com 163.com

    可以试试这个命令:netsh winsock reset ping不通,但是可以上网,原因有以下几个: 1.远程主机禁止ping 2.firewall禁止ping,icmp 3.dns解析有问题 fr ...

  4. ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室 实战系列（不断更新中）

    项目简介 利用ASP.NET SignalR技术与Layim前端im框架实现的一个简单的web聊天室,包括单聊,群聊,加好友,加群,好友搜索,管理,群组管理,好友权限设置等功能.涉及技术: Elast ...

  5. SSIS 参数与环境

    微软 BI 系列随笔 - SSIS 基础 - 参数与环境 简介 在上一篇博客中,主要讲述了如何实现SSIS的项目部署,参见 微软 BI 系列随笔 - SSIS 2012 基础 - SSIS 项目部署模 ...

  6. 21副GIF动图让你了解各种数学概念

    baidu 21副GIF动图让你了解各种数学概念

  7. javascript性能优化总结一（转载人家）

    一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己不擅于 ...

  8. Hbase客户端API基础小结笔记(未完)

    客户端API:基础 HBase的主要客户端接口是由org.apache.hadoop.hbase.client包中的HTable类提供的,通过这个类,用户可以完成向HBase存储和检索数据,以及删除无 ...

  9. vim（5）vim下wimrc的配置，解决中文乱码问题

    解决linux下vim乱码的情况:(修改vimrc的内容) 全局的情况下:即所有用户都能用这个配置 文件地址:/etc/vimrc 在文件中添加: ,ucs-bom,gb18030,gbk,gb231 ...

  10. 命令查看java的class字节码文件、verbose、synchronize、javac、javap

    查看Java字节码 1 javac –verbose查看运行类是加载了那些jar文件 HelloWorld演示: public class Test { public static void main ...