前台表单:

 <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. idea中@Data标签getset不起作用

    spring cloud中使用@Data标签,不用手动添加get set方法,但是如果项目中其他类中使用getset方法,如果报错,原因是idea中没有添加Lombok插件,添加上插件便可以解决.截图 ...

  2. 【分享】【原创开源应用第4期】给ili9488,RA8875类显示屏的emWin底层增加DMA加速方案

    说明:1.emWin底层中最重要的一个优化就是16bpp绘制,特此为其增加DMA加速,已经支持RA8875和ili9488.2.使用中务必将emWin任务设置为除了空闲任务,统计任务以外的最低优先级, ...

  3. MySQL乐观锁为什么可以防止并发

    问题引入 本文介绍的是最常用的也是mysql默认的innoDB引擎 Read committed隔离级别下事物的并发.这种情况下的事物特点是 读:在一个事物里面的select语句 不会受到其他事物(不 ...

  4. Hadoop伪分布式配置

    一步一步来: 安装VMWARE简单,安装CentOS也简单 但是,碰到了一个问题:安装的虚拟机没有图形化界面 最后,我选择了CentOS-7-x86_64-DVD-1503-01.iso镜像 配置用户 ...

  5. 数据攻略●R语言自述

    (注明:以下文章均在Linux操作系统下执行) 一.R语言简介 R语言是用于统计分析,图形表示和报告的编程语言和软件环境.R语言由Ross Ihaka和Robert Gentleman在新西兰奥克兰大 ...

  6. Python内置函数(44)——next

    英文文档: next(iterator[, default]) Retrieve the next item from the iterator by calling its __next__() m ...

  7. visual studio git for coding

    直接放图吧 双击存储库项目进入Git操作页面 点击之后输入你要发布的git地址 选择你的操作 如果你登录的密码错了 就需要去修改 否则永远都pull失败 打开控制面板 在这里修改

  8. java基础(十七)----- 浅谈Java中的深拷贝和浅拷贝 —— 面试必问

    假如说你想复制一个简单变量.很简单: int apples = 5; int pears = apples; 不仅仅是int类型,其它七种原始数据类型(boolean,char,byte,short, ...

  9. 使用ML.NET + ASP.NET Core + Docker + Azure Container Instances部署.NET机器学习模型

    本文将使用ML.NET创建机器学习分类模型,通过ASP.NET Core Web API公开它,将其打包到Docker容器中,并通过Azure Container Instances将其部署到云中. ...

  10. asp.net core系列 38 WebAPI 返回类型与响应格式--必备

    一.返回类型 ASP.NET Core 提供以下 Web API Action方法返回类型选项,以及说明每种返回类型的最佳适用情况: (1) 固定类型 (2) IActionResult (3) Ac ...