效果预览

点击选择文件，选择了文件后即上传，上传完成后点击保存，保存成功后模态框自动关闭。

前端代码：

html

<div class='form-group'><label class='col-sm-2 control-label'>上传图像：</label><div class='col-sm-10'><input type="file" class="newFile"/><input type="hidden" name="newFileMsg" data-name=""/></div>
</div>
<div class='form-group' style="display: none;" id="myModal_add_progressBar_Module"><label class='col-sm-2 control-label'>上传进度：</label><div class='col-sm-10'><div class="progress"><div class="progress-bar" id="myModal_add_progressBar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="width:0;" ></div></div><span id="percentage"></span><span id="time"></span></div>
</div>

js

//图片上传
$(".newFile").on('change', function(e){var fileObj = e.currentTarget.files[0]; // js 获取文件对象var name = e.currentTarget.files[0].name;$(".newFile").parents("div.col-sm-10").find("input[name='newFileMsg']").attr("data-name",name);var url="/tbQuestion/uploadImg";var form = new FormData(); // FormData 对象form.append("file", fileObj); // 文件对象var xhr;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数据//显示进度条$("#myModal_add_progressBar_Module").css("display","block");
});//上传成功响应
function uploadComplete(evt){//服务断接收完文件返回的结果//console.log(evt);var imgUrl = JSON.parse(evt.target.responseText);$(".newFile").parents("div.col-sm-10").find("input[name='newFileMsg']").val(imgUrl);
}
//上传失败
function uploadFailed(evt){parent.layer.msg("上传失败");
}
//上传进度实现方法，上传过程中会频繁调用该方法
function progressFunction(evt){// event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0if (evt.lengthComputable){$("#myModal_add_progressBar").css("width",Math.round(evt.loaded / evt.total * 100) + "%");$("#myModal_add_progressBar").html(Math.round(evt.loaded / evt.total * 100) + "%");$("#percentage").html("已上传"+Math.round(evt.loaded / evt.total * 100) + "%");}var nt = new Date().getTime();//获取当前时间var pertime = (nt-ot)/1000; //计算出上次调用该方法时到现在的时间差，单位为sot = new Date().getTime(); //重新赋值时间，用于下次计算var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位boloaded = evt.loaded;//重新赋值已上传文件大小，用以下次计算//上传速度计算var speed = perload/pertime;//单位b/svar 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").html('，速度：'+speed+units+'，剩余时间：'+resttime+'s');
}

批量导入

压缩文件或单一文件的差异：

点击选择文件，选择了文件后，需点击保存后才上传，上传完成后模态框自动关闭。

当导入大文件交给后台处理时，文件上传完成，进度条到100%，但导入整个过程并没有结束，即模态框不会马上关闭。

前端代码

html

<div class='form-group'><label class='col-sm-2 control-label'>选择文件</label><div class='col-sm-10'><input type="file" name="file" id="bulkImport"/></div>
</div>
<div class='form-group' id="fileSizeModule" style="display: none;"><label class='col-sm-2 control-label'>文件大小</label><div class='col-sm-10'><input type="text" class="form-control" name="fileSize"/></div>
</div>
<div class='form-group' style="display: none;" id="progressModule"><label class='col-sm-2 control-label'>上传进度</label><div class='col-sm-10'><div class="progress"><div id="progressBar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0"></div></div></div>
</div>

js

//用户点击批量导入 重置批量导入模态框
$("#clickBulkImport").click(function(){$("#fileSizeModule").css("display","none");$("#progressModule").css("display","none");$("#bulkImport").val("");$("#fileSizeModule").find("input[name='fileSize']").val("");$("#progressBar").attr("aria-valuemax","100");//kb$("#progressBar").attr("aria-valuenow","0");$("#progressBar").css("width","0");
});//用户选择了上传文件
$("#bulkImport").on('change', function( e ){$("#fileSizeModule").css("display","block");var fileSize = e.currentTarget.files[0].size;var totalNum=Math.round(Number(fileSize)/1024);$("#myModal_import").find("form input[name='fileSize']").val("大约"+totalNum+"KB");
});//批量导入 保存
$("#myModal_import").on("click",".saveBtn",function(){var fileObj = document.getElementById("bulkImport").files[0]; // js 获取文件对象var name = fileObj.name;var url="/batchImportEastQuest/import";var form = new FormData(); // FormData 对象form.append("file", fileObj); // 文件对象var xhr;xhr = new XMLHttpRequest();  // XMLHttpRequest 对象xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。xhr.onload = uploadComplete2; //请求完成xhr.onerror =  uploadFailed2; //请求失败xhr.upload.onprogress = progressFunction2;//【上传进度调用方法实现】xhr.upload.onloadstart = function(){//上传开始执行方法ot = new Date().getTime();   //设置上传开始时间oloaded = 0;//设置上传开始时，以上传的文件大小为0};xhr.send(form); //开始上传，发送form数据//显示进度条$("#progressModule").css("display","block");
});//上传成功响应
function uploadComplete2(evt){//服务断接收完文件返回的结果//console.log(evt);parent.layer.msg('批量导入成功！', {icon: 1});$("#progressModule").css("display","none");//隐藏进度条//关闭模态框$("#myModal_import").find(".modal-header .sr-only").click();var pageNum=$("b.presentPage").html();goPage(pageNum);
}
//上传失败
function uploadFailed2(evt){parent.layer.msg("导入失败");
}
//上传进度实现方法，上传过程中会频繁调用该方法
function progressFunction2(evt){// event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0if (evt.lengthComputable){$("#progressBar").css("width",Math.round(evt.loaded / evt.total * 100) + "%");$("#progressBar").html(Math.round(evt.loaded / evt.total * 100) + "%");}var nt = new Date().getTime();//获取当前时间var pertime = (nt-ot)/1000; //计算出上次调用该方法时到现在的时间差，单位为sot = new Date().getTime(); //重新赋值时间，用于下次计算var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位boloaded = evt.loaded;//重新赋值已上传文件大小，用以下次计算
}

代码参考了：https://www.cnblogs.com/007sx/p/7520529.html

进度条优化

优化点：

之前的进度条过于真实，前端数据处理完成，没有考虑后端数据是否处理完。这样一旦后端出错导致前端操作失败，而前端进度条又走到底了，很容易给用户错误的引导。

本次改进，前端进度条人为设置最大值为98%，直到收到后端处理完成的信息后，再将进度条走到100%。

这样操作需要后端同事配合。万一你遇到的同事，死活不给你返回信息，你就只能退而求其次将就了。

代码

html

<form class='form-horizontal' id="myModal_add_form"><div class='form-group'><label class='col-sm-2 control-label'>上传图像：</label><div class='col-sm-10'><input type="file" class="newFile"/><input type="hidden" name="newFileMsg" data-name=""/><input type="hidden" name="userId"/><input type="hidden" name="faceId"/></div></div><div class='form-group' style="display: none;" id="myModal_add_progressBar_Module"><label class='col-sm-2 control-label'>上传进度：</label><div class='col-sm-10'><div class="progress"><div class="progress-bar" id="myModal_add_progressBar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="width:0;" ></div></div></div></div>
</form>

js

//图片上传$(".newFile").on('change', function(e){var userName=$(this).parents(".modal-content").find("input[name='name']").val();if(userName == ""){parent.layer.msg("必须先填写姓名！");document.getElementById("myModal_add_form").reset();return }else{if(Math.round(Number(e.currentTarget.files[0].size)/1024) > 10240){parent.layer.msg("图片太大，请压缩大小后上传！图片最大 10 MB！");document.getElementById("myModal_add_form").reset();return }else{var activityId = $("#searchForm").find("select[name='activeId']").val();var fileObj = e.currentTarget.files[0]; // js 获取文件对象var name = e.currentTarget.files[0].name;$(".newFile").parents("div.col-sm-10").find("input[name='newFileMsg']").attr("data-name",name);var url="/faceRecognition/activityManage/uploadImg?name="+userName+"&activityId="+activityId;var form = new FormData(); // FormData 对象form.append("file", fileObj); // 文件对象var xhr;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数据//显示进度条$("#myModal_add_progressBar_Module").css("display","block");}}});//上传成功响应function uploadComplete(evt){//服务器接收完文件返回的结果var res=JSON.parse(evt.target.responseText);if(res.code == 0){//上传成功$(".newFile").parents("div.col-sm-10").find("input[name='newFileMsg']").val(res.data.url);$(".newFile").parents("div.col-sm-10").find("input[name='userId']").val(res.data.id);$(".newFile").parents("div.col-sm-10").find("input[name='faceId']").val(res.data.faceId);//进度条设置为100%；$("#myModal_add_progressBar").css("width","100%");$("#myModal_add_progressBar").html("100%");}}//上传失败function uploadFailed(evt){parent.layer.msg("上传失败");}//上传进度实现方法，上传过程中会频繁调用该方法function progressFunction(evt) {// event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0if (evt.lengthComputable) {//进度条限制 上传时永远不能达到100% 最大98% 除非收到后端返回值 才设置为100%$("#myModal_add_progressBar").css("width", Math.floor(evt.loaded / evt.total * 100)-2 + "%");$("#myModal_add_progressBar").html(Math.floor(evt.loaded / evt.total * 100)-2 + "%");}var nt = new Date().getTime();//获取当前时间var pertime = (nt - ot) / 1000; //计算出上次调用该方法时到现在的时间差，单位为sot = new Date().getTime(); //重新赋值时间，用于下次计算var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位boloaded = evt.loaded;//重新赋值已上传文件大小，用以下次计算}

真实的上传进度条及优化相关推荐

ssm上传文件进度条_Java 单文件、多文件上传 / 实现上传进度条
日常,工作在这里总结一下上传吧(是以前做过的练习,就汇总到个人博客吧) java ssm 框架实现文件上传实现:单文件上传.多文件上传(单选和多选),并且用 ajax 异步刷新,在当前界面显示上传 ...
Asp无组件上传进度条解决方案
http://webuc.net/dotey/archive/2004/07/22/1334.aspx 我还是一点一点用一个实例来说明的吧,客户端HTML如下.要浏览上传附件,我们通过<inpu ...
php大文件上传插件,PHP 大文件上传进度条实现
目前我知道的方法有两种,一种是使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc),另外一种方法是使用PECL扩 ...
java 上传进度条_Ajax上传文件并显示进度条
第四步:编写前端代码. 1.路径在当前项目的:src\main\resources\asyn.html 上传进度条 align="center"> 0% bordercol ...
html如何显示上传进度条,HTML5 Ajax文件上传进度条如何显示
这篇文章主要介绍了HTML5 Ajax文件上传进度条是如何显示的,基于原生html5实现,不需要falsh支持,进度可以自定义显示,控制灵活,对HTML5上传进度条感兴趣的小伙伴们可以参考一下原本打 ...
php flash上传进度条,PHP_PHP+FLASH实现上传文件进度条相关文件下载，PHP之所以很难实现上传进度条 - phpStudy...
PHP+FLASH实现上传文件进度条相关文件下载 PHP之所以很难实现上传进度条是因为在我们上传文件到服务器的时候,要等到文件全部送到服务器之后,才执行相应的php文件.在这之前,文件数据保存在一个 ...
大文件上传进度条显示（仿CSDN资源上传效果） .
浏览-选择文件-点击 "上传 "后,效果如下: 弹出透明UI遮罩层并显示上传这个过程我这里设置太透明了效果不是很立体文件结构如图: 说明:用到"高山来客" ...
html资源文件记载进度条,HTML5矢量实现文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
jquery和php上传文件进度条,jQuery实现文件上传进度条特效_jquery
上传进度条通常是由前面jquery加后端了脚本器脚本来实现了,今天我们介绍的是一款基本php+jQuery实现文件上传进度条效果的例子,具体细节如下. 最近呢,一个项目做一个进度条的效果出来,这个之前 ...

真实的上传进度条及优化

效果预览

前端代码：

html

js

批量导入

前端代码

html

js

进度条优化

优化点：

代码

html

js

真实的上传进度条及优化相关推荐

最新文章

热门文章