以前做无刷新上传，都要用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. C/C++的四大内存分区 分类： C/C++ 2015-05-09 01:36 163人阅读 评论(0) 收藏

    导读 正确的理解C/C++程序的内存分区,是合格程序猿的基本要求. 网络上流形两大版本内存分区,分别为: 1. 五大内存分区:堆.栈.全局/静态存储区.自由存储区和常量存储区. 2. 五大内存分区:堆 ...

  2. Intel DPDK的一些参资料

    dpdk.org What it is Intel® DPDK is a set of libraries and drivers for fast packet processing on x86 ...

  3. nodejs：express API之res.locals

    在从零开始nodejs系列文章中,有一个login.html文件 再来看它的get方法,我们并没有看到mess字段.那mess到底是从哪里来的呢? 接着我看到app.js文件里面: 只有这里出现了me ...

  4. Charles 3.11.5 绿色特别版

    Charles 3.11.5 绿色特别版,注册码在key文本中 链接: http://pan.baidu.com/s/1hsoFcyS 密码: q6e1

  5. IE10、IE11解决不能播放Flash的问题！

    http://jingyan.baidu.com/article/154b46315421b528ca8f41e4.html ie的问题向来是windows系统的传统问题之一.几乎每个版本的windo ...

  6. Hello Dojo!(翻译)

    http://dojotoolkit.org/documentation/tutorials/1.10/hello_dojo/index.html 欢迎学习DOJO!在本教程中,你将学些到如何加载DO ...

  7. 【uTenux实验】邮箱

    邮箱是一个通过在系统(共享)内存空间传递消息来实现同步和通信的对象.uTenux中每个邮箱都包含一个用来发送消息的消息队列和一个用于等待接收消息的任务队列,其使用邮箱功能的消息内容放置在发送方和接收方 ...

  8. 黄聪：wkhtmltopdf解决分页问题

    wkhtmltopdf 有个很好的方法,就是在那个div的样式后添加一个:page-break-inside:avoid;就ok了. <!DOCTYPE html PUBLIC "-/ ...

  9. mysql 异步执行 query //@todo

    http://stackoverflow.com/questions/27240421/php-asynchronous-mysql-query http://php.net/manual/en/my ...

  10. BRD

    搜索 复制