DDR爱好者之家 Design By 杰米
本文实例为大家分享了jquery实现上传文件进度条的具体代码,供大家参考,具体内容如下
首先引入需要的js css
用bootstrap进度条
<link rel="stylesheet" href="js/bootstrap/bootstrap.min.css" > <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-3.2.1.min.js">前端页面
<form id="uploadFile" action="uploadFile" enctype="multipart/form-data"> <input type="file" name="file"> <input type="button" value="上传" id="uplodsss"> </form> <div class="progress"> <div id="uploadFile_progressBar" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;"> <span id="uploadFile_rate">0%</span> </div> </div>js
<script type="text/javascript"> $(function(){ $("#uplodsss").click(function(){ debugger $('#uploadFile').ajaxSubmit({ type:'post', url:"uploadFile", processData: false, //需设置为false,因为data值是FormData对象,不需要对数据做处理 contentType: false, //需设置为false,因为是FormData对象,且已经声明了属性enctype="multipart/form-data" resetForm: true, //成功提交后,是否重置所有表单元素的值 uploadProgress: function (event, position, total, percentComplete) { if(percentComplete > 100){ percentComplete = 100; } var percentVal = percentComplete + '%'; $("#uploadFile_rate").html(percentVal); // 文件上传进度显示值 $("#uploadFile_progressBar").width(percentVal); // 进度条状态 }, success:function(data){ alert("上传文件成功!"); $("#uploadFile_progressBar").width("0px"); // 进度条状态 $("#uploadFile_rate").html("0%"); }, error:function(){ alert("上传文件失败,请重试!"); } }); }); }) </script>需要jquery.form.js,下载地址
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年04月24日
2024年04月24日
- 伊扬.1994-亲爱的你会想我吗?【太平洋影音】【WAV+CUE】
- 李健.2003-似水流年【泰达】【WAV+CUE】
- 崔苔菁.1969-天涯何处是芳草(LP版)【银河唱片】【WAV+CUE】
- 群星.1997-当男人爱上女人【BMG】【WAV+CUE】
- 汪峰《春天里的歌-抒情摇滚》2CD[WAV+CUE][1.4G]
- 陈奕迅《Shall We Dance Shall We Talk!》[FLAC 192kHz 24bit][1.5G]
- 汪峰 许巍《巍峰凛凛·实力比拼》3CD[WAV分轨][2.2G]
- dnf白字红字黄字是什么意思
- dnf石化鞋怎么搭配
- dnf神之真谛称号属性
- 《天国拯救2》游戏特色介绍
- 《无感染区》开局建家探索心得
- 《圣剑传说Visions of Mana》灵器作用介绍
- 吴克群2023-今天很OK[何乐音乐][WAV+CUE]
- 邱兰芬.2002-台湾红歌100年·台语精选辑CD19【乡城】【WAV+CUE】