以前做无刷新上传，都要用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. 极值问题（acms）

    [问题描述] 已知m.n为整数,且满足下列两个条件: ① m.n∈{1,2,…,k},即1≤m,n≤k,(1≤k≤109). ②(n2-m*n-m2)2＝1 你的任务是:编程输入正整数k,求一组满足上 ...

  2. Spring MVC入门实战（一）

    本文主要把一个菜鸟从“只是听说过Spring MVC”到“可以手动创建并运行一个Spring MVC工程”的过程记录下来,供以后复习. 0. 开发环境准备 计算机平台:Windows 7 X64. 需 ...

  3. UILabel的使用

    UILabel是iOS用于显示文本的控件. 基本属性如下代码所示: UILabel *lbl = [[UILabel alloc] init] ; //设置显示区域 lbl.frame = CGRec ...

  4. iOS设备的尺寸

    iOS设备的尺寸有两种统计单位:像素和点,对于程序员来说,只需要记住点即可. 常见的iOS设备的尺寸(点) 分辨率(点) 设备 分辨率(像素) 320*480 4.4s 320*480(4) 640* ...

  5. make自动生成依赖文件的两种形式

    最近编译源文件发现当修改头文件后,make并不会自动把包含此头文件的所有源文件重新编译,而每次都是需要把对应的中间文件清除才能重新编译,非常的麻烦.因此需要make自动对源文件所依赖的头文件进行管理, ...

  6. 标准库函数atoi的实现

    标准库函数atoi用于将字符串类型的数据转换为整形数据:在转换过程中要考虑空指针.空字符串"".正负号,溢出等情况 这里是将字符串str转换为32位整型,其正数的最值为0x7FFF ...

  7. smarty3与2的差异导致的小问题

    又是一天看视频~ 今天在PHP100上学习smartY教程,视频中讲到了在模板文件中直接写带有“{}”JAVASCRIPT脚本会报错,我照视频上的代码写了下来,如下: <script> f ...

  8. java反射学习笔记

    1.java反射概念 JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态调用对象的方法的功 ...

  9. 欢迎进入Node.js世界

    官网上(http://www.nodejs.org )给Node下的定义是:”一个搭建在Chrome JavaScript 运行时上的平台,用于构建高速.可伸缩的网络程序.Node.js采用的事件驱动 ...

  10. SpringMVC 中获取所有的路由配置。

    ApplicationContext context = TMSContextLookup.getApplicationContext(); String[] controllerList = con ...