本文实例讲解了创建交互式、快速动态网页应用的网页开发技术上传文件及进度条的实现方法，分享给大家供大家参考，具体内容如下

效果图：

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

首先我们用创建交互式、快速动态网页应用的网页开发技术来取得输入类型='file' id='file_upload '的文件对象：

定义变量文件=nullvar input=$(' # file _ upload ')；//文件域选择文件时，执行读取文件函数input.addEventListener('change '，readFile，false)；函数ReadFile(){ file=this。文件[0]；} 然后用FormData()送到后台。

var FD=new FormData()；fd.append('file '，file)；2.监听事件：给XMLHttpRequest添加上传中的监听事件，可以得到已上传的文件大小，用以实现进度条的显示。

//监听事件HR .上传。addeventlistener(' progress '，uploadProgress，false)；完整代码如下：

超文本标记语言头元字符集='utf-8 '标题进度条测试/title脚本类型=' text/JavaScript ' src=' http :/js/jquery-1。11 .1 .量滴js '/脚本/头体输入类型='file' id='file_upload'/输入类型='按钮'值='上传id='上传'/div style='背景： # 848484；宽度宽度：100像素宽度：10像素宽度-顶部：5像素宽度' div id='进度编号'样式='背景： # 428 BCA；宽度：0 px高度：10 px '/div/div字体id='百分比' 0%/字体/正文脚本定义变量文件=null $(function(){ $(“# upload”)).单击(function(){ upload()；});});var输入=文档。getelementbyid(' file _ upload ')；//文件域选择文件时，执行读取文件函数input.addEventListener('change '，readFile，false)；函数ReadFile(){ file=this。文件[0]；} //上传文件函数上传(){ var xhr=new XMLHttpRequest()；var FD=new FormData()；fd.append('fileName '，file)；//监听事件xhr。上传。addeventlistener(' progress '，uploadProgress，false)；//发送文件和表单自定义参数xhr.open('POST '，'./UploadServlet '，true)；xhr。发送(FD)；}函数uploadProgress(evt){ if(evt。长度可计算){//evt。已加载：文件上传的大小evt.total:文件总的大小var完成百分比=数学。回合((evt。已加载)* 100/evt。合计)；//加载进度条，同时显示信息$(“# percent”).html(完成百分比“%”$(“#进度数”)。css('宽度'，'完成百分比' px ')；} }/脚本/html以上就是关于创建交互式、快速动态网页应用的网页开发技术实现带进度条的文件上传全部内容，希望对大家的学习有所帮助。