前台表单:

 <form id="uploadform" method="post" enctype="multipart/form-data">
上传视频:<input type="file" id="file" name="file" onchange="uploadfile()"/>
进度:
     <progress id="progressBar" value="0" max="100"></progress>
    <span id="percentage"></span>
</form>

js代码:

<script type="text/javascript">

function uploadfile() {
var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
var FileController = "teacher/uploadvideo.action"; // 接收上传文件的后台地址 // FormData 对象
var form = new FormData($( "#uploadform" )[0]); // XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
xhr.open("post", FileController, true);
xhr.onload = function () {
// alert("上传完成!");
}; xhr.upload.addEventListener("progress", progressFunction, false);
xhr.send(form);
} function progressFunction(evt) {
var progressBar = document.getElementById("progressBar");
var percentageDiv = document.getElementById("percentage");
if (evt.lengthComputable) {
progressBar.max = evt.total;
progressBar.value = evt.loaded;
percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
if(evt.loaded==evt.total){
alert("上传完成100%");
}
}
}
</script>

后台(这个传的opid是教师编号,这些代码是我从自己的项目中提取出来的,但知识是一样的):

@RequestMapping("/teacher/uploadvideo")
public void uploadVideo(@RequestParam("file") MultipartFile uploadFile,String opid,HttpServletRequest request) throws IllegalStateException, IOException {
System.out.println(opid);
//获取文件初始名称
String originalFileName = uploadFile.getOriginalFilename(); Operation ope = operationService.getOpeByid(opid); String video = ope.getVideourl();
String houzhui = originalFileName.substring(originalFileName.lastIndexOf(".")); //上传文件
String newFileName = UUID.randomUUID()+houzhui;
File newFile = new File(videoUrl,newFileName);
uploadFile.transferTo(newFile); //删除原有文件
String oldVideoUrl = videoUrl + "/" + video;
File videoFile = new File(oldVideoUrl);
if(videoFile.exists()) {
videoFile.delete();
} ope.setVideourl(newFileName);
operationService.modify(ope);
}

springmvc实现视频上传+进度条的更多相关文章

  1. Java 单文件、多文件上传 / 实现上传进度条

    博客地址:https://ainyi.com/76 日常,工作 在这里总结一下上传吧(是以前做过的练习,就汇总到个人博客吧) java ssm 框架实现文件上传 实现:单文件上传.多文件上传(单选和多 ...

  2. jQuery文件上传插件jQuery Upload File 有上传进度条

    jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...

  3. HTML5矢量实现文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  4. 基于HT for Web矢量实现HTML5文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  5. PHP中使用Session配合Javascript实现文件上传进度条功能

    Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...

  6. iOS_文件上传进度条的实现思路-AFNettworking

    iOS_文件上传进度条的实现思路-AFNettworking //要上传的文件名,在这里我使用当前日期做为文件的名称 NSString * fileName =[NSString stringWith ...

  7. asp.net文件上传进度条研究

    文章:asp.net 文件上传进度条实现代码

  8. ajax上传进度条

    <script type="text/javascript"> function register(){ var frm = document.getElementBy ...

  9. Layui多文件上传进度条

    Layui原生upload模块不支持文件上传进度条显示,百度,谷歌找了一下不太适用.后面找到一个别人修改好的JS,替换上去,修改一下页面显示即可使用,一下是部分代码 HTML: <div cla ...

随机推荐

  1. 深港澳大湾区(深圳).NET技术交流会圆满成功

    2018年7月7日一场以.NET Core微服务和机器学习为主题的交流会成功在深圳职业技术学院落下帷幕.这次活动在短短的一周时间内,报名人数超过了170人,除了一些同学临时有事,基本都到现场了,特别感 ...

  2. 轻量级C#网络通信组件StriveEngine —— C/S通信开源demo(附源码)

    前段时间,有几个研究ESFramework网络通讯框架的朋友对我说,ESFramework有点庞大,对于他们目前的项目来说有点“杀鸡用牛刀”的意思,因为他们的项目不需要文件传送.不需要P2P.不存在好 ...

  3. 安卓开发学习笔记(四):Android Stuidio无法实现隐式Intent是为什么?

    一.首先检查我们的代码: FirstActivity.java(主活动程序当中的代码):Button3监听器后面的代码就是我们隐式Intent的业务逻辑所在了,大家可以往下面看看,大概在代码的第57行 ...

  4. Linux中搭建Maven私服

    linux安装maven 先解压maven的压缩包apache-maven-3.5.4-bin.tar.gz   命令: tar -zavf pache-maven-3.5.4-bin.tar.gz ...

  5. [Swift]LeetCode1002. 查找常用字符 | Find Common Characters

    Given an array A of strings made only from lowercase letters, return a list of all characters that s ...

  6. 代码覆盖率 (Code Coverage)从简到繁 (一)

    代码覆盖率(Code Coverage)是反映测试用例对被测软件覆盖程度的重要指标,也是衡量测试工作进展情况的重要指标.它也是对测试工作进行量化的重要指标之一,测试工作往往不如开发那样激动人心,一个重 ...

  7. 参数验证 @Validated 和 @Valid 的区别

    来源:blog.csdn.net/qq_27680317/article/details/79970590 整编:Java技术栈(公众号ID:javastack) Spring Validation验 ...

  8. 第五周 IP通信基础回顾

    广播请求,单播响应,ARP IPV4,IP地址32位二进制代码分为8个位一组 路由器每一个接口都是一个网段 ,网段与网段区分看网络地址 同一段链路是同网段 直接广播:主机号全为1 受限广播:全为1 特 ...

  9. 有了这 4 大特性,CDN 好用到飞起

    随着 CDN 市场的快速发展和网络新技术的不断涌现,目前的 CDN 已不仅仅是当初简单的内容分发,同时也是新特性研发.新技术推广及实践的平台.这些新技术.新特性,或者能够保障 CDN 安全性,或是提升 ...

  10. Spring Boot OAuth 2.0 客户端

    在上一篇<OAuth 2.0 授权码请求>中我们已经可以获取到access_token了,本节将使用客户端来访问远程资源 配置资源服务器 授权服务器负责生成并发放访问令牌(access_t ...