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 ... 
随机推荐
- JDK 8 之 Stream sorted() 示例
			原文链接:http://www.concretepage.com/java/jdk-8/java-8-stream-sorted-example 国外对Java8一系列总结的不错, 翻译过来给大家共享 ... 
- [Swift]LeetCode60. 第k个排列 | Permutation Sequence
			The set [1,2,3,...,n] contains a total of n! unique permutations. By listing and labeling all of the ... 
- [Swift]LeetCode1027. 最长等差数列 | Longest Arithmetic Sequence
			Given an array A of integers, return the length of the longest arithmetic subsequence in A. Recall t ... 
- PHP算法之冒泡排序
			//冒泡排序 //①思路,先比较出第一次,找一个最大的值,排到最后; //②重复count遍之后,就能得到排序; //③优化,每一次循环之后不需要再次全部重复; $array = [11,5,4,58 ... 
- .NET Core 2.0迁移技巧之web.config配置文件
			大家都知道.NET Core现在不再支持原来的web.config配置文件了,取而代之的是json或xml配置文件.官方推荐的项目配置方式是使用appsettings.json配置文件,这对现有一些重 ... 
- Typescript 查缺补漏
			Types Casting: let input = xxx as HTMLInputElement; let input = <HTMLElement>xxxx; Object Shap ... 
- Python内置函数(56)——set
			英文文档: class set([iterable]) Return a new set object, optionally with elements taken from iterable. s ... 
- BBS论坛(七)
			7.1.修改邮箱界面完成 (1)cms/cms_resetemail.html {% extends 'cms/cms_base.html' %} {% block title -%} 修改邮箱 {% ... 
- WARNING: 'aclocal-1.14' is missing on your system.
			源码安装zabbix agent时进行到make install时报如下错误: WARNING: 'aclocal-1.14' is missing on your system. You shoul ... 
- [NewLife.XCode]对象字典缓存(百万军中取敌首级)
			NewLife.XCode是一个有10多年历史的开源数据中间件,支持nfx/netcore,由新生命团队(2002~2019)开发完成并维护至今,以下简称XCode. 整个系列教程会大量结合示例代码和 ... 
