以前做无刷新上传，都要用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. java Scanner

    public static void main(String[] args) throws IOException { System.out.print("Enter a number:&q ...

  2. python笔记集合

    1.win_64下编译pyd(编译器用的tdm-gcc-5.1) gcc test.c -shared -Ic:\Python27\include -Lc:\Python27\libs -lpytho ...

  3. 严格模式use strict

    严格模式主要有以下限制: 变量必须声明后再使用函数的参数不能有同名属性,否则报错不能使用with语句不能对只读属性赋值,否则报错不能使用前缀0表示八进制数,否则报错不能删除不可删除的属性,否则报错不能 ...

  4. JSP页面的隐含对象和Servlet程序里的对象之间的关联和区别

    首先,有两个概念: 1.JSP页面的域对象:pageContext,request,session,application对象(四个) void setAttribute(String name,Ob ...

  5. mysql查看bin日志命令

    mysqlbinlog --no-defaults   --base64-output=decode-rows -v  --start-datetime='2016-01-14 16:30:00' - ...

  6. MFC中的各种DC区别

    转载自:xntop的<区别MFC中的CClientDC.CWindowDC.CPaintDC.CMetaFileDC> CClientDC及其子类 1. CClientDC类只能在客户区绘 ...

  7. AX 2012 关于parts 添加

    只有当引用parts的form中design属性style为 ListPage, DetailsFormMaster, or DetailsFormTransaction,才能创建FactBox pa ...

  8. Android UI 绘制过程浅析（一）LayoutInflater简介

    前言 这篇blog是我在阅读过csdn大牛郭霖的<带你一步步深入了解View>一系列文章后,亲身实践并做出的小结.作为有志向的前端开发工程师,怎么可以不搞懂View绘制的基本原理——简直就 ...

  9. 10. windows与linux文件共享

    1. 关闭防火墙 /etc/init.d/iptables stop 2. C:\Users\cfm>ping 192.168.232.131 正在 Ping 192.168.232.131 具 ...

  10. angularjs实现 checkbox全选、反选的思考

    之前做了一周的打酱油测试,其实感觉其实测试也是上辈子折翼的天使. 好长时间没写代码,感觉好多都不会了. 感谢这周没有单休,我能看熬夜看奥运了.我能有时间出去看个电影,我能有时间出去逛个商城,我能有时间 ...