用到两个对象

第一个对象：FormData

第二个对象：XMLHttpRequest

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

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

示例代码：

<!DOCTYPE html>

<html>

<head>

<title>Html5 Ajax 上传文件</title>

<script type="text/javascript">

function UpladFile() {

var fileObj = document.getElementByIdx_x_x("file").files[0]; // 获取文件对象

var FileController = "../file/save";                    // 接收上传文件的后台地址

// FormData 对象

var form = new FormData();

form.append("author", "hooyes");                        // 可以增加表单数据

form.append("file", fileObj);                           // 文件对象

// XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

xhr.open("post", FileController, true);

xhr.onload = function () {

alert("上传完成!");

};

xhr.send(form);

}

</script>

</head>

<body>

<input type="file" id="file" name="myfile" />

<input type="button" onclick="UpladFile()" value="上传" />

</body>

</html>

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

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

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

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

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

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

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

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

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

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

function progressFunction(evt) {

var progressBar = document.getElementByIdx_x_x("progressBar");

if (evt.lengthComputable) {

progressBar.max = evt.total;

progressBar.value = evt.loaded;

}

}

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

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

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

<!DOCTYPE html>

<html>

<head>

<title>Html5 Ajax 上传文件</title>

<script type="text/javascript">

function UpladFile() {

var fileObj = document.getElementByIdx_x_x("file").files[0]; // js 获取文件对象

var FileController = "../file/save";                    // 接收上传文件的后台地址

// FormData 对象

var form = new FormData();

form.append("author", "hooyes");                        // 可以增加表单数据

form.append("file", fileObj);                           // 文件对象

// XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

xhr.open("post", FileController, true);

xhr.onload = function () {

// alert("上传完成!");

};

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

xhr.send(form);

}

function progressFunction(evt) {

var progressBar = document.getElementByIdx_x_x("progressBar");

var percentageDiv = document.getElementByIdx_x_x("percentage");

if (evt.lengthComputable) {

progressBar.max = evt.total;

progressBar.value = evt.loaded;

percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";

}

}

</script>

</head>

<body>

<progress id="progressBar" value="0" max="100">

</progress>

<span id="percentage"></span>

<br />

<input type="file" id="file" name="myfile" />

<input type="button" onclick="UpladFile()" value="上传" />

</body>

</html>

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

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

var flist = Request.Files;

for (int i = 0; i < flist.Count; i++)

{

string FilePath = "E:\\hooyes\\Files\\";

var c = flist[i];

FilePath = Path.Combine(FilePath, c.FileName);

c.SaveAs(FilePath);

}

//注释

//以上文字为转载文字。访问原地址：http://blog.sina.com.cn/huzyi

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

  1. koa2：通过Ajax方式上传文件，使用FormData进行Ajax请求

    koa2通过表单上传的网上很多,但通过Ajax方式上传文件,使用FormData进行Ajax请求,不好找. 参考了这个用base64上传图片的例子.https://github.com/Yuki-Mi ...

  2. 通过Ajax方式上传文件，使用FormData进行Ajax请求

    通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...

  3. [转] 通过Ajax方式上传文件，使用FormData进行Ajax请求

    通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...

  4. Ajax方式上传文件报错"Uncaught TypeError: Illegal invocation"

    今天使用ajax上传文件时,出现了错误.数据传输的方式是通过定义formData完成的,提交的文件对象也设置为dom对象,但是还是不能发送请求.F12看到后台报了个错误:Uncaught TypeEr ...

  5. 通过Ajax方式上传文件(input file)，使用FormData进行Ajax请求

    <script type="text/jscript"> $(function () { $("#btn_uploadimg").click(fun ...

  6. 【2】通过Ajax方式上传文件(图片)，使用FormData进行Ajax请求

    HTML: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...

  7. jQuery Ajax方式上传文件实现暂停或取消上传

    未上传时要实现取消,很简单... 但如果用户点击了上传,并加载了进度信息... 2017-05-04再次改进.在上传过程中用户可以按 Esc 来取消上传(取消当前上传,或者是全部上传)... 也可以在 ...

  8. ajax如何上传文件（整理）

    ajax如何上传文件(整理) 一.总结 一句话总结:用FormData,FormData+ajax=异步上传二进制文件 <form enctype="multipart/form-da ...

  9. egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名

    egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名 评论:10 · 阅读:8437· 喜欢:0 一.需求 二.CSRF 校验 三.通过 form 表单上传文件 四.通过 ...

随机推荐

  1. android JNI 调用NDK方法

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  2. js生成和下载二维码

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  3. 我的敏捷、需求分析、UML、软件设计电子书 - 下载（持续更新中）

    我将所有我的电子书汇总在一起,方便大家下载!(持续更新) 文档保存在我的网站——软件知识原创基地上(www.umlonline.org),请放心下载. 1)软件设计是怎样炼成的?(2014-4-1 发 ...

  4. git-入门

    一.简介 Git是目前世界上最先进的分布式版本控制系统,Git中绝大部分操作都是访问本地资源,不需要网络,其中有三个概念比较重要:1. 工作目录 2. 暂存区域 3.本地仓库. 简单说明一下,工作目录 ...

  5. TNS-12535: TNS:operation timed out案例解析

    一数据库突然连接不上,在自己电脑上使用SQL Developer也连接不上.立即使用SecureCRT连接上了这台服务器,从下面几个方面检查. 1:检查了数据库的状态是否正常 $ sqlplus / ...

  6. postgres创建表的过程以及部分源码分析

    背景:修改pg内核,在创建表时,表名不能和当前的用户名同名. 首先我们知道DefineRelation此函数是最终创建表结构的函数,最主要的参数是CreateStmt这个结构,该结构如下 typede ...

  7. SQLServer中Partition By 函数的使用

    今天群里看到一个问题,在这里概述下:查询出不同分类下的最新记录.一看这不是很简单的么,要分类那就用Group By;要最新记录就用Order By呗.然后在自己的表中试着做出来: 首先呢我把表中的数据 ...

  8. Linux下用ftp更新web内容！

    使用ftp更新web!让网页更新一次OK! 配置如下: 1.在Linux下安装ftp服务器! yum -y install vsftpd #ftp由vsftpd提供! 2.配置主配置文件/etc/vs ...

  9. 数据结构（c语言）之学生信息管理系统

    程序思维导图 代码表示(代码参考:长春大学-牛言涛老师) 如有错误请指出欢迎交流 #include<stdio.h> #include<malloc.h>//动态存储分配函数头 ...

  10. Would Your Work Habits Change if You Were Paid by the Job?

    原文地址:http://success-sys.com/2016/09/26/would-your-work-habits-change-if-you-were-paid-by-the-job/ A ...