关键词:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>XMLHttpRequest上传文件进度实现</title> <script type="text/javascript"> var xhr; var ot;// var oloaded; //上传文件方法 function UpladFile() { var fileObj = document.getElementById("file").files[0]; // js 获取文件对象 var url = "uploadFile"; // 接收上传文件的后台地址 var form = new FormData(); // FormData 对象 form.append("mf", fileObj); // 文件对象 xhr = new XMLHttpRequest(); // XMLHttpRequest 对象 xhr.open("post", url, true); //post方式,url为服务器请求地址,true 该参数规定请求是否异步处理。 xhr.onload = uploadComplete; //请求完成 xhr.onerror = uploadFailed; //请求失败 xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】 xhr.upload.onloadstart = function(){//上传开始执行方法 ot = new Date().getTime(); //设置上传开始时间 oloaded = 0;//设置上传开始时,以上传的文件大小为0 }; xhr.send(form); //开始上传,发送form数据 } //上传进度实现方法,上传过程中会频繁调用该方法 function progressFunction(evt) { var progressBar = document.getElementById("progressBar"); var percentageDiv = document.getElementById("percentage"); // event.total是需要传输的总字节,event.loaded是已经传输的字节。如果event.lengthComputable不为真,则event.total等于0 if (evt.lengthComputable) {// progressBar.max = evt.total; progressBar.value = evt.loaded; percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%"; } var time = document.getElementById("time"); var nt = new Date().getTime();//获取当前时间 var pertime = (nt-ot)/1000; //计算出上次调用该方法时到现在的时间差,单位为s ot = new Date().getTime(); //重新赋值时间,用于下次计算 var perload = evt.loaded - oloaded; //计算该分段上传的文件大小,单位b oloaded = evt.loaded;//重新赋值已上传文件大小,用以下次计算 //上传速度计算 var speed = perload/pertime;//单位b/s var bspeed = speed; var units = ‘b/s‘;//单位名称 if(speed/1024>1){ speed = speed/1024; units = ‘k/s‘; } if(speed/1024>1){ speed = speed/1024; units = ‘M/s‘; } speed = speed.toFixed(1); //剩余时间 var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1); time.innerHTML = ‘,速度:‘+speed+units+‘,剩余时间:‘+resttime+‘s‘; if(bspeed==0) time.innerHTML = ‘上传已取消‘; } //上传成功响应 function uploadComplete(evt) { //服务断接收完文件返回的结果 // alert(evt.target.responseText); alert("上传成功!"); } //上传失败 function uploadFailed(evt) { alert("上传失败!"); } //取消上传 function cancleUploadFile(){ xhr.abort(); } </script> </head> <body> <progress id="progressBar" value="0" max="100" style="width: 300px;"></progress> <span id="percentage"></span><span id="time"></span> <br /><br /> <input type="file" id="file" name="myfile" /> <input type="button" onclick="UpladFile()" value="上传" /> <input type="button" onclick="cancleUploadFile()" value="取消" /> </body> </html>
若想用jQuery 中的ajax实现的话,jQuery的 ajax 方法没有关于 progress 事件的操作,此时需要调用的XMLHttpRequest对象是指定progress 事件。
$.ajax({ type: "POST", url: "upload", data: formData , //这里上传的数据使用了formData 对象 processData : false, //必须false才会自动加上正确的Content-Type contentType : false , //这里我们先拿到jQuery产生的 XMLHttpRequest对象,为其增加 progress 事件绑定,然后再返回交给ajax使用 xhr: function(){ var xhr = $.ajaxSettings.xhr(); if(onprogress && xhr.upload) { xhr.upload.onprogress = progressFunction;
return xhr;
}
}
});
XMLHttpRequest对象,传送数据的时候,有一个progress事件,用来返回进度信息。
它分成上传和下载两种情况
1)下载的progress事件属于XMLHttpRequest对象
2)上传的progress事件属于XMLHttpRequest.upload对象。
下载进度实现:
xhr.onprogress = downloadProgress; function downloadProgress(event) {//未测试 if(event.lengthComputable) { var percentComplete = event.loaded / event.total; } }
Dropzone.js 上传进度条不显示
...:2014-05-2003:02:57【问题描述】:我正在使用Dropzone.js进行文件上传,它运行良好,只是没有出现进度条。没有错误。我在网站的前端使用Bootstrap。上传文件后,如果我在Chrome中检查元素,我发现它及其父元素的高度均为0px:奇怪... 查看详情
uploadifive.js怎么去掉进度条
...onText上传按钮显示文本queueID进度条的显示位置fileType上传文件类型 查看详情
java多文件上传显示进度条
用java或者js实现对多文件上传,并显示进度条,可以只显示总进度。手上有类似代码的朋友联系我,扣-15080818,跪求!使用 apachefileupload ,springMVC jquery1.6x,bootstrap 实现一个带进度条的多文件上传,由于fileupload的局限,暂... 查看详情
jquery上传文件显示进度条(代码片段)
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><scriptsrc="../js/jquery.js"></script></head><body><h2>HTML5异步上传文件,带进度条(jQuery)</h2><formm 查看详情
layui文件上传进度条(模拟)(代码片段)
1.修改上传组件js(没测)https://blog.csdn.net/weixin_42457316/article/details/81017471https://www.cnblogs.com/youmingkuang/p/9183528.htmlhttps://fly.layui.com/jie/19430/ 1、upload.js扩展功能利用ajax的xhr属性实现该功能修改过 查看详情
使用jquery.form.js实现文件上传及进度条前端代码
...术Aajax的表单提交只能提交data数据到后台,没法实现file文件的上传还有展示进度功能,这里用到form.js的插件来实现,搭配css样式简单易上手,而且高大上,推荐使用。需要解释下我的结构,#upload-input-file的input标签是真实的文... 查看详情
webuploader插件单个文件上传(带进度条)
@{ViewBag.Title="主页";}<scriptsrc="~/Scripts/jquery-1.9.1.min.js"></script><linkhref="~/Scripts/1/bootstrap.css"rel="stylesheet"/><linkhref="~/Scripts/1/webuploader.css"rel="styles 查看详情
js上传进度条
http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html http://www.cnblogs.com/yuanlong1012/p/5127497.html https://front-js.cc/test/fileupload/ http://www.ruanyifeng.com/blog 查看详情
文件上传进度条干扰控制器重定向
】文件上传进度条干扰控制器重定向【英文标题】:FileuploadprogressbarinterfereswithControllerredirect【发布时间】:2021-11-1610:23:43【问题描述】:我有一个文件提交表单和一个跟踪上传进度的进度条。但是,控制进度条的javascript会干扰... 查看详情
文件上传进度条[重复]
】文件上传进度条[重复]【英文标题】:Fileuploadprogressbar[duplicate]【发布时间】:2011-04-0611:20:21【问题描述】:可能重复:UploadProgressBarinPHP任何人都可以建议一种在上传文件时包含文件上传进度条的好方法。我知道这将是javascript... 查看详情
使用 jQuery 的文件上传进度条
】使用jQuery的文件上传进度条【英文标题】:FileuploadprogressbarwithjQuery【发布时间】:2013-03-0220:39:19【问题描述】:我正在尝试在我的项目中实现AJAX文件上传功能。我为此使用jQuery;我的代码使用AJAX提交数据。我还想实现一个文... 查看详情
使用 jQuery 的文件上传进度条
】使用jQuery的文件上传进度条【英文标题】:FileuploadprogressbarwithjQuery【发布时间】:2013-03-0220:39:19【问题描述】:我正在尝试在我的项目中实现AJAX文件上传功能。我为此使用jQuery;我的代码使用AJAX提交数据。我还想实现一个文... 查看详情
异步上传文件(jquery.form)+进度条+上传到ftp服务器(代码片段)
最近写了一个小项目需要上传文件显示进度条到ftp,总结一下分享我用的是jQuery.form.js上传ftp服务器,自己百度去搭建很简单的Talkischeap.Showmeyourcode. GitHub上面的源码:https://github.com/Vinkong/learngitaspx页面<%@PageLan... 查看详情
MVC 文件上传的引导进度条
】MVC文件上传的引导进度条【英文标题】:BootstrapProgressBarforMVCFileUpload【发布时间】:2014-08-2402:38:06【问题描述】:有没有一种简单的方法可以在文件加载时显示阻塞的Bootstrap进度条?上传文件时,进度会显示在chrome的状态栏中... 查看详情
ajax大文件切割上传以及带进度条。
分块传输的原理就是利用HTML5新增的文件slice截取函数。 代码如下:html:<inputid="f"type="file"name="part"onchange="writeFile()">JS:核心部分已经加粗显示了,其他部分不用看,因为实现的方式有很多种,不一定要按照我的方式去... 查看详情
使用 jquery ui 进度条上传文件
】使用jqueryui进度条上传文件【英文标题】:fileuploadwithjqueryuiprogressbar【发布时间】:2011-01-2015:13:55【问题描述】:我正在使用jCrop,我想为图片上传添加一个进度条,如何让jqueryui进度条加载图片字节?【问题讨论】:我相信这... 查看详情
带进度条的文件上传?
】带进度条的文件上传?【英文标题】:Fileuploaderwithprogressbar?【发布时间】:2011-09-1108:01:12【问题描述】:如何创建带有进度条的HTML/PHP/AJAX文件上传器?我不知道从哪里开始。【问题讨论】:【参考方案1】:我用过Uploadify。易... 查看详情
文件上传:进度条完成百分比
】文件上传:进度条完成百分比【英文标题】:Fileuploads:Percentagecompletedprogressbar【发布时间】:2014-03-0523:30:00【问题描述】:我正在尝试为BuddyPress中的头像上传添加一个“到目前为止完成的百分比”进度条。目的是阻止用户在... 查看详情