Ueditor+ajax视频保存到本地和视频url在另一个页面播放

来源：互联网发布：自动谱曲软件下载编辑：程序博客网时间：2024/06/03 22:59

注意：在ueditor编辑器上传视频，显示本地保存成功，而且在自己tomcat下也能找到，如果直接把链接copy到另一个jsp，修改了jsp。

刚才上传的视频就会自动删除，然后链接也就失效了。

1、先修改jsp-->config.json下这几处位置

"imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

"videoPathFormat"：/ueditor/jsp/upload/video

"filePathFormat": "/ueditor/jsp/upload/file

这三个是默认的上传路径，在自己的项目根目录下（即E:\apache-tomcat-8.0.30\webapps\Web_9_5_0项目名下）新建ueditor/jsp/upload/image /ueditor/jsp/upload/video /ueditor/jsp/upload/file这几个文件夹，直接运行下载下来的ueditor插件显示本地保存成功了就可以去根目录查看了。

2、关于项目根目录，eclipse默认的是在wordspace下的.metadata.......，把这个改到tomcat就可以直接在webapps下看到部署的项目了。这个具体在这个写有。

http://blog.csdn.net/qq_36688143/article/details/78851206

3、在ueditor编辑器上传的内容保存到了本地后，保存url到另一个jsp播放视频，这里是index.jsp -->UeditorController.java---> videoShow.jsp

////////////////////////////////////////////////////////////////////////////////////////index.jsp中

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript" src="utf8-jsp/jquery-2.0.3.js"></script>

<script type="text/javascript" src="utf8-jsp/ueditor.config.js"></script>

<script type="text/javascript" src="utf8-jsp/ueditor.all.js"></script>

<script type="text/javascript" src="utf8-jsp//lang/zh-cn/zh-cn.js"></script>
</head>
<body>

<script type="text/javascript">
var url2 = "http://localhost:8080/Web_9_5_0";
</script>


<div>
<script id="container" name="content" type="text/plain"></script>
</div>


<div>
<button onclick="insertVideo()">提交</button>
</div>


<script type="text/javascript">
//在 b.execCommand("inserthtml",g.join(""),!0);
//添加 b.fireEvent('afterUpVideo',k);
var ue = UE.getEditor('container');
ue.addListener('afterUpVideo', function(t, arg) { //侦听视频上传
//获得视频Url
url2 = url2+arg[0].url;
})
</script>


<script type="text/javascript">
function insertVideo() {
$.ajax({
url : "saveVideo",
data : {
mydata : url2
},
type : "post",
success : function(msg) {
//alert("msg:" + msg.map.url);
window.location.href="videoShow.jsp?";
},
error : function() {
alert("wrong");
}
});
}
</script>

</body>
</html>

////////////////////////////////////////////////////////////////////////////////////////UeditorController.java中

package com.fxy.controller;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.context.request.RequestContextHolder;
import org.springframework.web.context.request.ServletRequestAttributes;

import com.fxy.bean.Msg;

//注解说明这个是控制层
@Controller
public class UeditorController {

/**
* @Title: saveVideo
* @Description:把传入的视频url存到session,然后在videoShow.jsp${获得}
* @return
* @throws
* @author: fxy
* @date: 2017年12月21日
*/
@ResponseBody
@RequestMapping("saveVideo")
public Msg saveVideo(){
HttpServletRequest request = ((ServletRequestAttributes)RequestContextHolder.
getRequestAttributes()).getRequest();
String url = request.getParameter("mydata");
//获得ajax传过来的url
System.out.println("mydata:"+url);
//使用request对象的getSession()获取session，如果session不存在则创建一个
HttpSession session = request.getSession();
//将数据存储到session中
session.setAttribute("videoUrl", url);

//目前Msg返回类冗余，在接下来的开发完善才会使用到
return Msg.success().add("url", url);
}

}

////////////////////////////////////////////////////////////////////////////////////////videoShow.jsp中

效果图如下：

点击提交按钮

超链接设置在了“第一节这里”

阅读全文

0 0