以前做无刷新上传，都要用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. world machine, 输出lightmap

    一,输出黑白lightmap: 二,输出彩色lightmap: 需要注意的是:当输出黑白lightmap时,输出设备要用Height Output:当输出彩色lightmap时,输出设备要用Bitma ...

  2. IntelliJ IDEA15导入jar包

    在IDEA中导入jar包和eclipse中是不一样的,那么现在我们就来看看在IDEA中如何导入jar包. 1.点击"File"-->"Project Structu ...

  3. JSR 303 - Bean Validation 介绍及最佳实践

    JSR 303 - Bean Validation 介绍及最佳实践 JSR 303 – Bean Validation 是一个数据验证的规范,2009 年 11 月确定最终方案.2009 年 12 月 ...

  4. Catalan数(数论)

    Catalan数 [参考网址]http://www.cnblogs.com/gongxijun/p/3232682.html 记得当时我们队写过一个,差点超时,现在找到了公式,感觉还是挺简单的. 还要 ...

  5. php 读取文件readfile

    <?php //读取文件 //echo readfile('aa.txt'); //打开文件更好的方法是fopen $f = fopen('aa.txt' , 'r') or die('unab ...

  6. 如何调试IIS错误信息

    原文链接: http://blogs.msdn.com/b/tess/archive/2009/03/20/debugging-a-net-crash-with-rules-in-debug-diag ...

  7. 黑马程序员_JAVA基础知识总结3

    ------- android培训.java培训.期待与您交流! ---------- Java源文件的扩展名是.java,编译之后生成.class的文件.所有的类都有一个共同的继承祖先Object类 ...

  8. C#_GDI+详细教程(图形图像编程基础)

    第7章  C#图形图像编程基础 本章主要介绍使用C#进行图形图像编程基础,其中包括GDI+绘图基础.C#图像处理基础以及简单的图像处理技术. 7.1  GDI+绘图基础 编写图形程序时需要使用GDI( ...

  9. inline-block和block的区别

    <html> <head> <style> body,ul,li,span{padding:0px;margin:0px;} </style> < ...

  10. click事件

    click事件是可以多次绑定的,如果绑定多次就会执行多次,因此再不需要重复执行的情况下,就需要使用unbind对事件进行解绑