ssm+ajax 实现form表单上传视频和图片，获取视频时长。

前台页面，上传图片和视频。

<form id="formsub" method="post" enctype="multipart/form-data"
   role="form">
   <div class="form-group">
      <label for="name">名称</label> <input name="text" type="text"
         class="form-control" id="name" placeholder="请输入名称">
   </div>
   <div class="form-group">
      <label for="inputfile">图片路径</label> <input type="file" name="file"
         id="inputfile"> <br> <label for="inputfile">视频路径</label>
      <video style="display:none;" controls="controls" id="aa" oncanplaythrough="myFunction(this)">
      </video>
      <input type="file" id="inputfile1" onchange="changeFile(this)" name="videofile">
      <input  style="display: none;" type="text" name="vtime" value=""  id="getDuration"/>
      <p class="help-block">请确认上传的格式正确。</p>
   </div>
   <div class="checkbox">
      <label> <input type="checkbox">请打勾
      </label>
   </div>
   <input id="time" type="hidden" value="">
   <button type="button" name="time" id="submitimg" class="btn btn-default">提交</button>
</form>

ajax代码和js获取视频时长代码

 $('#submitimg').click(function() {//通过单击按钮实现form表单提交。
   var form = new FormData(document.getElementById("formsub"));
   alert(document.getElementById('name').value);
   $.ajax({
      url : "User/addImg.do",
      type : "post",
      data : form,
      processData : false,
      contentType : false,
      success : function(data) {
         if (data = 'Yes') {
            alert("success");
         }
      },
      error : function(e) {
         alert("错误！！");

      }
   });

});

//获取视频时长格式为 00:00 暂时只支持获取MP4格式，其他格式会为空

  function myFunction(ele) {

      var hour = parseInt((ele.duration)/3600);
      var minute = parseInt((ele.duration%3600)/60);
      var second = Math.ceil(ele.duration%60);

      if(minute<10 && second>9){
          document.getElementById("getDuration").value="0"+minute+":"+second;
}
      if(minute<10 && second<10){
          document.getElementById("getDuration").value="0"+minute+":"+"0"+second;
      }
      if(minute>9 && second<10){
          document.getElementById("getDuration").value=minute+":"+"0"+second;
      }
      if(minute>9 && second>10){
          document.getElementById("getDuration").value=minute+":"+second;
      }

      //console.log(Math.floor(ele.duration));
      //document.write("这段视频的时长为："+hour+"小时，"+minute+"分，"+second+"秒");
     // document.getElementById("getDuration").value=minute+":"+second;
  }

  function changeFile(ele){
      var video = ele.files[0];
      var url = URL.createObjectURL(video);
      console.log(url);
      document.getElementById("aa").src = url;
  }

后台UserController代码

//  上传视频
@RequestMapping(value = "/addImg.do")
@ResponseBody
public String addImg(HttpServletRequest request, Video video, @RequestParam(value = "vtime") String vtime, @RequestParam(value = "text", required = false) String text, @RequestParam(value = "file", required = false) MultipartFile pictureFile, @RequestParam(value = "videofile", required = false) MultipartFile pictureFile1) throws Exception {
    //这个RequestParam(value="file")的是我们在前台的name=“file”
    // 使用UUID给图片重命名，并去掉四个“-”
    Video video1 = userService.findvideotext(text);

    if (text != "") {//判断视频标题是否重名

        String name = UUID.randomUUID().toString().replaceAll("-", "");
        // 获取文件的扩展名
        String ext = FilenameUtils.getExtension(pictureFile
                .getOriginalFilename());
        // 设置图片上传路径
        // 以绝对路径保存重名命后的图片
        pictureFile.transferTo(new File("D:\\video\\" + name + "." + ext));
        // 把图片存储路径保存到数据库

        String vname = UUID.randomUUID().toString().replaceAll("-", "");
        // 获取视频的扩展名
        String vext = FilenameUtils.getExtension(pictureFile1.getOriginalFilename());
        // 设置视频上传路径
        // 以绝对路径保存重名命后的图片
        pictureFile1.transferTo(new File("D:\\video\\" + vname + "." + vext));
        // 把视频存储路径保存到数据库
        System.out.println("有没有收到text" + text);
        video.setText(text);

          //http://localhost:8080/video/这个是本地视频前缀，为了实现本地视频的网页播放，
          //搭建一个tomcat图片服务器就行了
        video.setMurl("http://localhost:8080/video/" + name + "." + ext);
        video.setVutl("http://localhost:8080/video/" + vname + "." + vext);

        String murl = "http://localhost:8080/video/" + name + "." + ext;
        String vurl = "http://localhost:8080/video/" + vname + "." + vext;

        SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd");//设置日期格式
        String time = df.format(new Date());
        System.out.println("步骤1");
        video.setTime(time);

        String videosrc = "D://video//" + vname + "." + vext;
        File source = new File("D:\\video\\" + vname + "." + vext);
        System.out.println("D:\\video\\" + vname + "." + vext);

        System.out.println("步骤3");
        video.setVtime(vtime);
        int playback = 0;
        System.out.println("上传时间" + time);
        System.out.println("视频时长" + vtime);

        userService.setimg(text, murl, vurl, time, vtime, playback);
        return videosrc;

        // 重定向到查询所有用户的Controller，测试图片回显

    } else {
        return "No";
    }

}

UserService

public void setimg(String text,String name,String name1,String time,String vtime,int playback) {
   usermapper.setimg(text,name,name1,time,vtime,playback);

}

Mapper接口

public void setimg(String text,String name, String name1,String time,String vtime,int playback);

userMapper.xml

<insert id="setimg" parameterType="String">
   insert into
   t_video(text,murl,vurl,time,vtime,playback) values (#{0},#{1},#{2},#{3},#{4},#{5})
</insert>

至此，实现ssm+ajax 实现form表单上传视频和图片，js获取视频时长。

ssm+ajax 实现form表单上传视频和图片，获取视频时长。

猜你喜欢