脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → AJAX相关 → ajax实现带进度条的文件上传

基于HTML5 Ajax实现文件上传并显示进度条

 更新时间：2016年02月25日 17:12:09   作者：LZGS_4  
这篇文章主要介绍了基于HTML5 Ajax实现文件上传并显示进度条的相关资料,需要的朋友可以参考下

本文实例讲解了ajax上传文件及进度条的实现方法，分享给大家供大家参考，具体内容如下

效果图：

html5上传是同步上传的方式，所以能够实现进度条的显示。
1.上传文件：

首先我们用ajax来取得<input type="file" id="file_upload">的file对象：

var file = null; 
var input = $("#file_upload"); 
//文件域选择文件时, 执行readFile函数 
input.addEventListener('change',readFile,false); 
function readFile(){ 
 file = this.files[0]; 
}

 然后用FormData()送到后台。

 var fd = new FormData(); 
fd.append("file", file);

 2.监听事件：给XMLHttpRequest添加上传中的监听事件，可以得到已上传的文件大小，用以实现进度条的显示。

 
//监听事件 
hr.upload.addEventListener("progress", uploadProgress, false);

完整代码如下：

<html> 
<head> 
<meta charset="utf-8"> 
<title>进度条测试</title> 
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script> 
</head> 
<body> 
 
 <input type="file" id="file_upload"/> 
 <input type="button" value="上传" id="upload"/> 
 <div style="background:#848484;width:100px;height:10px;margin-top:5px"> 
 <div id="progressNumber" style="background:#428bca;width:0px;height:10px" > 
 </div> 
 </div> 
 <font id="percent">0%</font> 
</body> 
<script> 
var file = null; 
$(function(){ 
 $("#upload").click(function(){ 
 upload(); 
 }); 
}); 
var input = document.getElementById("file_upload"); 
 
//文件域选择文件时, 执行readFile函数 
input.addEventListener('change',readFile,false); 
 
function readFile(){ 
 file = this.files[0]; 
} 
//上传文件 
function upload(){ 
 var xhr = new XMLHttpRequest(); 
 
 var fd = new FormData(); 
 
 fd.append("fileName", file); 
 
 //监听事件 
 xhr.upload.addEventListener("progress", uploadProgress, false); 
 
 //发送文件和表单自定义参数 
 xhr.open("POST", "../UploadServlet",true); 
 
 xhr.send(fd); 
 } 
 
 function uploadProgress(evt){ 
 if (evt.lengthComputable) {   
  //evt.loaded：文件上传的大小 evt.total：文件总的大小   
  var percentComplete = Math.round((evt.loaded) * 100 / evt.total); 
  //加载进度条，同时显示信息  
  $("#percent").html(percentComplete + '%') 
  $("#progressNumber").css("width",""+percentComplete+"px");  
 } 
 } 
</script> 
</html>

以上就是关于ajax实现带进度条的文件上传全部内容，希望对大家的学习有所帮助。

您可能感兴趣的文章:

相关文章

  • Ajax请求超时与网络异常处理图文详解

    Ajax请求超时与网络异常处理图文详解

    最近在项目中遇到一个问题，当加载数据量特别大的时候会出现加载超时现象，所以这篇文章主要给大家介绍了关于Ajax请求超时与网络异常处理的相关资料,需要的朋友可以参考下
    2021-05-05
  • 双层ajax嵌套（可多层）用法实例

    双层ajax嵌套（可多层）用法实例

    这篇文章主要介绍了双层ajax嵌套（可多层）用法,实例分析了Ajax嵌套的相关使用技巧,可实现多层嵌套的功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • 浅谈Ajax的缓存机制

    浅谈Ajax的缓存机制

    本文主要是向我们简单介绍了AJAX的缓存机制的几条简单的规则以及注意事项，非常不错，这里推荐给大家。
    2015-02-02
  • 无限分级和tree结构数据增删改【附DEMO下载】

    无限分级和tree结构数据增删改【附DEMO下载】

    这篇文章主要介绍了无限分级和tree结构数据增删改的相关资料,需要的朋友可以参考下
    2016-05-05
  • react axios 跨域访问一个或多个域名问题

    react axios 跨域访问一个或多个域名问题

    这篇文章主要介绍了react axios 跨域访问一个或多个域名问题，本文通过实例代码截图的形式给大家展示的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • ajax设置header指南教程

    ajax设置header指南教程

    Ajax 是一个令人误导的名称,Ajax 应用程序可能使用 XML 来传输数据,但将数据作为纯文本或 JSON 文本传输也同样常见,本文给大家介绍ajax设置header指南教程,感兴趣的朋友一起看看吧
    2023-10-10
  • Ajax在请求过程中显示进度的简单实现

    Ajax在请求过程中显示进度的简单实现

    ajax技术在web应用中使用非常频繁，本文以asp.net MVC为示例，提供一种简单的实现方式。ajax在请求过程中显示进度条，是怎么实现的呢？本文通过代码和文字说明相结合的方式分享给大家。
    2015-09-09
  • JQuery中Ajax的Post提交在IE下中文乱码的解决方法

    JQuery中Ajax的Post提交在IE下中文乱码的解决方法

    在JQuery的Ajax POST请求中，进行请求，其中的中文在后台，显示为乱码，在FF/Chrome中，可以正常传递中文，但是在IE下，则存在问题
    2014-05-05
  • php AJAX POST的使用实例代码

    php AJAX POST的使用实例代码

    AJAX POST的使用实例 @ 2008-12-3 晚上调试成功
    2008-12-12
  • 浅析JSONP解决Ajax跨域访问问题的思路详解

    浅析JSONP解决Ajax跨域访问问题的思路详解

    JSONP是一种使用JSON数据的方式，返回的不是JSON对象，是包含JSON对象的javaScript脚本。接下来通过本文给大家介绍jsonp解决ajax跨域访问问题的思路，非常不错具有参考借鉴价值，感兴趣的朋友一起看下吧
    2016-05-05

最新评论