springmvc实现视频上传+进度条
前台表单:
<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实现视频上传+进度条的更多相关文章
- Java 单文件、多文件上传 / 实现上传进度条
博客地址:https://ainyi.com/76 日常,工作 在这里总结一下上传吧(是以前做过的练习,就汇总到个人博客吧) java ssm 框架实现文件上传 实现:单文件上传.多文件上传(单选和多 ...
- jQuery文件上传插件jQuery Upload File 有上传进度条
jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...
- HTML5矢量实现文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
- 基于HT for Web矢量实现HTML5文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
- PHP中使用Session配合Javascript实现文件上传进度条功能
Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...
- iOS_文件上传进度条的实现思路-AFNettworking
iOS_文件上传进度条的实现思路-AFNettworking //要上传的文件名,在这里我使用当前日期做为文件的名称 NSString * fileName =[NSString stringWith ...
- asp.net文件上传进度条研究
文章:asp.net 文件上传进度条实现代码
- ajax上传进度条
<script type="text/javascript"> function register(){ var frm = document.getElementBy ...
- Layui多文件上传进度条
Layui原生upload模块不支持文件上传进度条显示,百度,谷歌找了一下不太适用.后面找到一个别人修改好的JS,替换上去,修改一下页面显示即可使用,一下是部分代码 HTML: <div cla ...
随机推荐
- 对JS闭包和函数作用域的问题的深入讨论,如何理解JS闭包和函数作用域链?
首先先引用<JavaScript权威指南>里面的一句话来开始我的博客:函数的执行依赖于变量作用域,这个作用域是在函数定义时决定的,而不是函数调用时决定的. 因此,就出现了如下的几串代码: ...
- Java面试题整理:这些Java程序员面试中经常遇见的题目,必须掌握才能有好结果
1.是否可以从一个static方法内部发出对非static方法的调用? 不可以.因为非static方法是要与对象关联在一起的,必须创建一个对象后,才可以在该对象上进行方法调用,而static方法调用时 ...
- [Swift]LeetCode251.展平二维向量 $ Flatten 2D Vector
Implement an iterator to flatten a 2d vector. For example,Given 2d vector = [ [1,2], [3], [4,5,6] ] ...
- 1. VIM 系列 - 简单入门,拾起兴趣
目录 1. 认识模式 1.1 正常模式 1.2 插入模式 1.3 命令模式 1.4 可视模式 2. 常用快捷键 1. 认识模式 vim 一共有四种模: 1. 正常模式 2. 插入模式 3. 命令模式 ...
- python之pickle模块
1 概念 pickle是python语言的标准模块,安装python后以包含pickle库,不需要再单独安装. pickle提供了一种简单的持久化功能,可以将对象以文件的形式存放在磁盘上. pickl ...
- Linux自启动执行脚本方法
1. 在/etc/rc.d/init.d/下创建脚本,要遵守service script的标准: 例如: vi /etc/rc.d/init.d/gfs #!/bin/bash#case " ...
- 【机器学习】--线性回归中soft-max从初始到应用
一.前述 Soft-Max是做多分类的,本身是哪个类别的概率大,结果就为对应的类别.为什么称之为Soft判别,原因是归一化之后的概率选择最大的作为结果,而不是只根据分子. 二.原理 sigmod函数: ...
- python +selenium识别不来click事件,出现报错
assert "login" in browser.title browser.implicitly_wait(10) elem = browser.find_element_by ...
- 如何阅读jdk源码?
简介 这篇文章主要讲述jdk本身的源码该如何阅读,关于各种框架的源码阅读我们后面再一起探讨. 笔者认为阅读源码主要包括下面几个步骤. 设定目标 凡事皆有目的,阅读源码也是一样. 从大的方面来说,我们阅 ...
- xtrabackup备份(MySQL备份)与恢复
xtrabackup备份(MySQL备份)与恢复 1. innobackupex参数选项 --no-timestamp: 不创建一个时间戳 --defaults-file=[MY.CNF] //指定配 ...