用到两个对象

第一个对象：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. 【译】Spring 4 + Hibernate 4 + Mysql + Maven集成例子（注解 + XML）

    前言 译文链接:http://websystique.com/spring/spring4-hibernate4-mysql-maven-integration-example-using-annot ...

  2. 梳理delegate相关概念

    一.前言 可能项目规模较小,项目中除了增删改查就只剩下业务流程,以前都没怎么弄明白的东西时间长了就越发的模糊了... 二.使用场景 MSDN:delegate 是一种可用于封装命名或匿名方法的引用类型 ...

  3. xcache的使用与配置

    一.安装Xcache # wget http://xcache.lighttpd.net/pub/Releases/1.3.0/xcache-1.3.0.tar.gz # tar zxvf xcach ...

  4. PriorityQueue和Queue的一种变体的实现

    队列和优先队列是我们十分熟悉的数据结构.提供了所谓的“先进先出”功能,优先队列则按照某种规则“先进先出”.但是他们都没有提供:“固定大小的队列”和“固定大小的优先队列”的功能. 比如我们要实现:记录按 ...

  5. Surface在C++层的创建源码解析

    Surface在C++层的创建源码解析 源码为:android4.4.4 1.创建SurfaceComposerClient绘图客户端 // create a client to surfacefli ...

  6. [原创]自己动手实现React-Native下拉框控件

    因项目需要,自己动手实现了一个下拉框组件,最近得空将控件独立出来开源上传到了Github和npm. Github地址(求Star 求Star 求Star 

  7. 理解Docker（6）：若干企业生产环境中的容器网络方案

    本系列文章将介绍 Docker的相关知识: (1)Docker 安装及基本用法 (2)Docker 镜像 (3)Docker 容器的隔离性 - 使用 Linux namespace 隔离容器的运行环境 ...

  8. linux命令-系统命令

    1.查看Linux磁盘空间大小 df -lh Filesystem 容量 已用 可用 已用% 挂载点 /dev/hda8 11G 6.0G 4.4G 58% / /dev/shm 236M 0 236 ...

  9. js获取页面url中的各项值

    一. 通过window.location获取各项参数 1.获取页面完整的url url = window.location.href; 2.获取页面的域名 host = window.location ...

  10. webform控件

    简单控件: 1.Label 会被编译成span标签 属性: Text:文本内容 CssClass:CSS样式 <asp:Label ID=" CssClass="aaa&qu ...