前台表单:

 <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. PHP_DOC php文档结构及注解浏览

    项目中的PHP文件比较多,为了方便查看,使用PHP写了个小工具,可查看PHP文件的所有类.函数 和特定注释. 显示PHP文件的 Class 和 Function 显示 /// 开头的注解 显示 /// ...

  2. [Swift]LeetCode491. 递增子序列 | Increasing Subsequences

    Given an integer array, your task is to find all the different possible increasing subsequences of t ...

  3. [Swift]LeetCode667. 优美的排列 II | Beautiful Arrangement II

    Given two integers n and k, you need to construct a list which contains n different positive integer ...

  4. 通信统计接口字段填充内容shell脚本

    现在通信行业上班,最麻烦的就是计算各个协议接口字段填充的内容是否正确.经历了小白似的一个个字段统计在到单个接口所有字段统计,然后到现在的多个接口一次统计.在大大节省了时间的同时,让自己有更充足的时间来 ...

  5. Spring MVC知识

    f-sm-1. 讲下SpringMvc和Struts1,Struts2的比较的优势 性能上Struts1>SpringMvc>Struts2 开发速度上SpringMvc和Struts2差 ...

  6. iOS学习——Quartz2D学习之DrawRect

    Quartz2D学习之DrawRect 本文以问答形式主要讲述Quartz2D的相关内容,参考内容是网上下载的学习视频资料. 1.什么是Quartz2D? 他是一个二维的绘图引擎,同时支持iOS和Ma ...

  7. 使用C# (.NET Core) 实现抽象工厂设计模式 (Abstract Pattern)

    本文的概念性内容来自深入浅出设计模式一书. 上一篇文章讲了简单工厂和工厂方法设计模式 http://www.cnblogs.com/cgzl/p/8760250.html, 使用的是披萨店的例子. 文 ...

  8. c# 中的封装、继承、多态详解

    面向对象有封装.继承.多态这三个特性,面向对象编程按照现实世界的特点来管理复杂的事物,把它们抽象为对象,具有自己的状态和行为,通过对消息的反应来完成任务.这种编程方法提供了非常强大的多样性,大大增加了 ...

  9. [三] java虚拟机 JVM字节码 指令集 bytecode 操作码 指令分类用法 助记符

    说明,本文的目的在于从宏观逻辑上介绍清楚绝大多数的字节码指令的含义以及分类 只要认真阅读本文必然能够对字节码指令集有所了解 如果需要了解清楚每一个指令的具体详尽用法,请参阅虚拟机规范 指令简介 计算机 ...

  10. 初识TensorFlow

    在前边几期的文章中,笔者已经用TensorFlow进行的一些基础性的探索工作,想必大家对TensorFlow框架也是非常的好奇,本着发扬雷锋精神,笔者将详细的阐述TensorFlow框架的基本用法,并 ...