用到两个对象

第一个对象：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. 重写ValidateEntity虚方法实现可控的上下文验证和自定义验证

    上篇文章介绍了ValidationAttribute和IValidatableObject.Validate验证,但是这种验证还是稍微简单了,对于复杂的实体,例如:继承过来的实体.实现某接口的实体等等 ...

  2. SCVMM中Clone虚拟机失败显示Unsupported Cluster Configuration状态

    在SCVMM进行虚拟机的Clone,虽然失败了,但是Clone出虚拟机却显示在SCVMM控制台的虚拟机的列表中,并且状态是Unsupported Cluster Configuration.无法修复, ...

  3. 编译安装mysql

    参考:http://www.centoscn.com/CentosServer/www/2015/0422/5245.html 安装mysql5.6.17 1.按照标准需要给mysql创建所属用户和用 ...

  4. 2-kvm创建快照以及网卡绑定

    kvm创建快照以及网卡绑定 创建node1 查看node1 进入到kvm的配置文件里 将rhcs文件复制一份取名为node1.xml 通过这个命令随机生成一个uuid 然后就进入node1.xml里修 ...

  5. 记一次简单的SQL优化

    原来的sql是这样写的 SELECT d.ONSALE_BARCODE, d.ONSALE_NAME, c.ONSALE_ID, CAST( , ) ) AS CUSTOMARY_PRICE, CAS ...

  6. Resources.Load加载文件返回null的原因

    1.文件夹都要放在Resources目录下 2.加载时photoName不需要扩展名 Texture2D t = Resources.Load<Texture2D>("Loadi ...

  7. mysql benchmark基准测试

    git项目地址: https://github.com/akopytov/sysbench 利用sysbench很容易对mysql做性能基准测试(当然这个工具很强大,除了测试主流数据库性能,还能测试其 ...

  8. [LeetCode] Wildcard Matching 外卡匹配

    Implement wildcard pattern matching with support for '?' and '*'. '?' Matches any single character. ...

  9. jQuery Ajax 实例 ($.ajax、$.post、$.get)

    jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...

  10. ECharts学习（3）--toolbox（工具栏）

    1. toolbox:这是ECharts中的工具栏.内置有导出图片.数据视图.动态类型切换.数据区域缩放.重置五个工具. 2. toolbox中的属性,不包含五个工具.里面最主要的就是feature这 ...