原文地址：http://blog.sina.com.cn/s/blog_5d64f7e3010127ns.html

用到两个对象

第一个对象：FormData

第二个对象：XMLHttpRequest

目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象，但IE9尚未支持 FormData 对象，还在用IE6 ? 只能仰天长叹....

有了这两个对象，我们可以真正的实现Ajax方式上传文件。

示例代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Html5 Ajax 上传文件</title>
  5. </head>
  6. <body>
  7. <input type="file" id="file" name="myfile" />
  8. <input type="button" onclick="UpladFile()" value="上传" />
  1. <script type="text/javascript">
  2.         function UpladFile() {
  3.             var fileObj = document.getElementByIdx_x_x("file").files[0]; // 获取文件对象
  4.             var FileController = "../file/save";                    // 接收上传文件的后台地址
  5.             var form = new FormData();
  6.             form.append("author", "hooyes");                        // 可以增加表单数据
  7.             form.append("file", fileObj);                           // 文件对象
  8.             var xhr = new XMLHttpRequest();
  9.             xhr.open("post", FileController, true);
  10.             xhr.onload = function () {
  11.                 alert("上传完成!");
  12.             };
  13.             xhr.send(form);
  14.         }
  15. </script>
  16.  
  17. </body>
  18.  
  19. </html>

很简洁的代码，便可以达到Ajax方式上传文件，上面的代码中使用<input type="file" />这种传统的选择文件的方法产生文件对象，HTML5还支持使用多种更灵活的方式，如拖拽文件到指定的元素上产生。

Ajax已成功上传文件，但这时我们会想到一个问题，如何显示进度条？带着这个问题，脑子会想到，Flash? 浏览器插件？。

NO,现在不需要这些东西了。

开始着手，先做一个进度条，进度条也很简单，使用HTML5 新加的标签：

  1. <progress id="progressBar" value="0" max="100"> </progress>

这个在浏览器中便会呈现了一个进度条，现在我们要做的就是在上传的时候，实时的去改变它的Value值，然后进度显示的问题便交给它了。

我们的服务器端无需修改，只需要在JS中XHR对象加一个事件。

  1. xhr.upload.addEventListener("progress", progressFunction, false);

progressFunction 被调用的时候会传进一个事件对象，这个对象有两个属性，一个就是loaded 一个是total ，分别代表，已上传的值，和总要上传的值。

这正是我们需要的，所以这个方法，可以这样写：

  1. function progressFunction(evt) {
  2.  
  3.             var progressBar = document.getElementByIdx_x_x("progressBar");
  4.  
  5.             if (evt.lengthComputable) {
  6.  
  7.                 progressBar.max = evt.total;      
  8.  
  9.                 progressBar.value = evt.loaded;
  10.             }
  11.  
  12. }

这样便可以完成，上传进度显示了。

如下针对上面的第一个示例代码，做一个调整：

示例代码2，带进度显示：

  1. <!DOCTYPE html>
  2.  
  3. <html>
  4.  
  5. <head>
  6.  
  7.     <title>Html5 Ajax 上传文件</title>
  8.  
  9.     <script type="text/javascript">
  10.  
  11.         function UpladFile() {
  12.  
  13.             var fileObj = document.getElementByIdx_x_x("file").files[0]; // js 获取文件对象
  14.  
  15.             var FileController = "../file/save";                    // 接收上传文件的后台地址 
  16.  
  17.             // FormData 对象
  18.  
  19.             var form = new FormData();
  20.  
  21.             form.append("author", "hooyes");                        // 可以增加表单数据
  22.  
  23.             form.append("file", fileObj);                           // 文件对象
  24.  
  25.             // XMLHttpRequest 对象
  26.  
  27.             var xhr = new XMLHttpRequest();
  28.  
  29.             xhr.open("post", FileController, true);
  30.  
  31.             xhr.onload = function () {
  32.  
  33.                // alert("上传完成!");
  34.  
  35.             };
  36.  
  37.             xhr.upload.addEventListener("progress", progressFunction, false);
  38.  
  39.             xhr.send(form);
  40.  
  41.         }
  42.  
  43.         function progressFunction(evt) {
  44.  
  45.             var progressBar = document.getElementByIdx_x_x("progressBar");
  46.  
  47.             var percentageDiv = document.getElementByIdx_x_x("percentage");
  48.  
  49.             if (evt.lengthComputable) {
  50.  
  51.                 progressBar.max = evt.total;
  52.  
  53.                 progressBar.value = evt.loaded;
  54.  
  55.                 percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
  56.  
  57.             }
  58.  
  59.         }  
  60.  
  61.     </script>
  62.  
  63. </head>
  64.  
  65. <body>
  66.  
  67.     <progress id="progressBar" value="0" max="100">
  68.  
  69.     </progress>
  70.  
  71.     <span id="percentage"></span>
  72.  
  73.     <br />
  74.  
  75.     <input type="file" id="file" name="myfile" />
  76.  
  77.     <input type="button" onclick="UpladFile()" value="上传" />
  78.  
  79. </body>
  80.  
  81. </html>

后台接收文件的程序可以是任何语言(C#,PHP,Python 等)编写的，上述例子使用C#

很简单，无需为这个进度条做任何改动。

  1. var flist = Request.Files;
  2.  
  3.             for (int i = ; i < flist.Count; i++)
  4.  
  5.             {
  6.  
  7.                 string FilePath = "E:\\hooyes\\Files\\";
  8.  
  9.                 var c = flist[i];
  10.  
  11.                 FilePath = Path.Combine(FilePath, c.FileName);
  12.  
  13.                 c.SaveAs(FilePath);
  14.  
  15.             }

Ajax 文件上传的更多相关文章

  1. AJAX文件上传实践与分析，带HTML5文件上传API。

    对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可 ...

  2. 兼容ie的jquery ajax文件上传

    Ajax文件上传插件很多,但兼容性各不一样,许多是对ie不兼容的,另外项目中是要求将网页内容嵌入到桌面端应用的,这样就不允许带flash的上传插件了,如:jquery uploadify...悲剧 对 ...

  3. jQuery插件AjaxFileUpload实现ajax文件上传

    转自:http://www.cnblogs.com/linjiqin/p/3530848.html jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个 ...

  4. ajax 文件上传，ajax

    ajax 文件上传,ajax 啥也不说了,直接上代码! <input type="file" id="file" name="myfile&qu ...

  5. 转: 如何实现jQuery的Ajax文件上传

    [PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上 ...

  6. [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传

    原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件 ...

  7. php+ajax文件上传

    php+ajax文件上传 html: <input id="user_real_name" class="input_show" type="t ...

  8. springmvc+ajax文件上传

    环境:JDK6以上,这里我是用JDK8,mysql57,maven项目 框架环境:spring+springmvc+mybaits或spring+springmvc+mybatis plus 前端代码 ...

  9. iframe实现Ajax文件上传效果示例

    <!doctype html> <html> <head> <meta charset=utf-8> <head> <title> ...

  10. 使用ajax提交form表单，包括ajax文件上传【转载】

    [使用ajax提交form表单,包括ajax文件上传] 前言 转载:作者:https://www.cnblogs.com/zhuxiaojie/p/4783939.html 使用ajax请求数据,很多 ...

随机推荐

  1. php-fpm进程数优化

    php-fpm未优化网友反映的问题 1.最近将Wordpress迁移至阿里云.由于自己的服务器是云服务器,硬盘和内存都比较小,所以内存经常不够使,通过ps ax命令查看后,发现启动php-fpm进程数 ...

  2. CI Weekly #1 | 这份周刊，带你了解 CI/CD 、DevOps、自动化测试

    原文首次发布与 flow.ci Blog >> 链接,转载请联系:) 准备了很久,CI Weekly 第一期终于来了. CI Weekly 围绕『 软件工程效率提升』 进行一系列技术内容分 ...

  3. iOS-应用打包发布常见问题

    这个月公司安排我一个人做iOS客户端开发,由于急着用,我先发布一个版本,由于第一次发布iOS应用,期间出了不少问题,记录于此. 1.使用Application Loader 发布时报错:Communi ...

  4. python 数据的拷贝

    # -*- config=utf-8 -*- #数据的拷贝 a=[1,2,3,4,5,6,"a","C"]; b=a;# a 与 b 的地址空间相同 a.app ...

  5. webapp启动流程

    webapp启动流程 看了这个教程,其实所有的webapp大致都是这个流程了.

  6. Linux常用命令02

    显示当前目录 pwd         (print working directory)   显示当前目录 创建目录 mkdir       (make directory) 创建目录(注意不是创建文 ...

  7. ios app 打包上传 app store（Application Loader）

    背景:使用Xcode 上传APP, 这个 有时候很慢,构建版本需要等很长时间,所以我推荐使用Application Loader 1.使用xocd 打包,导出.ipa文件 2. OK ,跟着上面做, ...

  8. hibernate(七) hibernate中查询方式详解

    序言 之前对hibernate中的查询总是搞混淆,不明白里面具体有哪些东西.就是因为缺少总结.在看这篇文章之前,你应该知道的是数据库的一些查询操作,多表查询等,如果不明白,可以先去看一下 MySQL数 ...

  9. Control Flow 如何处理 Error

    在Package的执行过程中,如果在Data Flow中出现Error,那么Data Flow component能够将错误行输出,只需要在组件的ErrorOutput中进行简单地配置,参考<D ...

  10. equals和==的区别 你真的掌握了吗？

    PS:最近读Java编程思想的时候发现了一些小问题.就是equals方法和==,感觉自己是真正掌握了,其实并没有.简单的记录一下. 学习内容: 1.equals 和 == 的区别  equals和== ...