zoukankan      html  css  js  c++  java
  • springmvc实现视频上传+进度条

    前台表单:

    1 <form id="uploadform" method="post" enctype="multipart/form-data">
    2 上传视频:<input type="file" id="file" name="file" onchange="uploadfile()"/>
    3                    进度:
    4      <progress id="progressBar" value="0" max="100"></progress>
    5          <span id="percentage"></span>
    6 </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);
        }
  • 相关阅读:
    mybaits不能出现小于号
    结合rpyc使用python实现动态升级的方法
    secureCRT使用小贴士
    大数据的实时技术
    gnuplot使用
    Python3.4使用MySql
    Linux内存分配----SLAB
    WinInet:HTTPS 请求出现无效的证书颁发机构的处理
    正则表达式学习
    C++中static的全部作用
  • 原文地址:https://www.cnblogs.com/ITDreamer/p/9695012.html
Copyright © 2011-2022 走看看