<%@ page trimDirectiveWhitespaces="true" language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" scope="session"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<jsp:include page="../comm/head.jsp"/>
<script type="text/javascript" src="${ctx }/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="${ctx }/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="${ctx }/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="${ctx }/static/ajaxfileupload.js"></script>
<script type="text/javascript" src="${ctx }/static/imglimit.js"></script>
</head>
<body>
<jsp:include page="../comm/topnav.jsp"/>
<div class="container">
<div class="row">
<div class="col-sm-12">
<jsp:include page="../comm/breadcrumb.jsp"/>
<!--
<input type=file id="appFile" name="appFile" οnchange="getValue();" style="-moz-opacity:0;filter:alpha(opacity=0);opacity:0;position:absolute;left:166px;" />
<input id="appFilename" style="color: green;border: 1px solid green;width:300px;" />
<input type="button" value="File" style="border: 1px solid green;width:80px;" />
<input type="button" value="提交" οnclick="add();"> -->
<form class="form-horizontal" action="${ctx }/video/save" method="post" id="messageForm">
<div class="form-group">
<label class="col-sm-2 control-label" for="appFile">图片：</label>
<div class="col-sm-5">
<input id="appFile" name="appFile" οnchange="document.getElementById('img1').src=this.value;" type="file">
<c:if test="${empty entity.image}">
<img id="img1" class="img-rounded wh100" value="entity.image">
</c:if>
<button type="button" οnclick="getValue()" class="mp15">图片上传</button>
</div>
<div class="col-sm-5">
<p >上传图片大小必须在2M之内<br />
上传图片宽高必须在400-720之间<br/>
图片类型必须是.gif,jpeg,jpg,png中的一种</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="title">标题：</label>
<div class="col-sm-8">
<input id="title" class="form-control" name="title" value="" type="text" value="${entity.title}"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="content">文字描述:</label>
<div class="col-sm-8">
<textarea rows="5" cols="6" name="content" id="content" class="form-control">${entity.content}</textarea>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="file1">视频：</label>
<div class="col-sm-3">
<input id="file1" name="file1" οnchange="document.getElementById('video').src=this.value;" type="file">
<!--
<video width="320" height="240" controls="controls" autoplay="autoplay">
<source src="/i/movie.ogg" id="v1" type="video/ogg" />
<source src="/i/movie.mp4" id="v2" type="video/mp4" />
<source src="/i/movie.webm"id="v3" type="video/webm" />
<object data="/i/movie.mp4" width="320" height="240">
<embed width="320" height="240" id="v4" src="/i/movie.swf" />
</object>
</video> -->
<video width="500" height="300" id="vv" controls autobuffer>
</video>
<button type="button" οnclick="getVideo()" class="mp15">视频上传</button>
</div>
<div class="col-sm-5">
<p>上传视频大小必须在200M之内<br />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<button type="submit" class="btn btn-default pull-right">保存</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
function getValue() {
$.ajaxFileUpload({
url : "${ctx}/video/upload/1", //submit to UploadFileServlet
secureuri : false,
fileElementId : 'appFile',
dataType : 'json', //or json xml whatever you like~
success : function(msg) {
if(msg.result=="510"){
alert("上传图片大小必须在2M之内");
}else if (msg.result=="1"){
alert("上传成功");
$("#prevImage").attr('src', '${ctx}/' + msg.path);
$("#img1").attr('src', msg.path);
}else{
alert("图片上传失败");
}
},
error : function(msg) {
alert("图片上传失败");
}
});
}
function getVideo() {
$.ajaxFileUpload({
url : "${ctx}/video/upload/0", //submit to UploadFileServlet
secureuri : false,
fileElementId : 'file1',
dataType : 'json', //or json xml whatever you like~
success : function(msg) {
if(msg.result=="410"){
alert("上传视频大小必须在200M之内");
}else if (msg.result=="1"){
alert("上传成功");
$("#vv").attr('src', "http://localhost:8080/upload/201612041217581807.ogg");
/* $("#img1").attr('src', msg.path); */
}else{
alert("视频上传失败");
}
},
error : function(msg) {
alert("图片上传失败");
}
});
}
$(function() {
UE.getEditor('container');
var $form = $("#messageForm");
$form.validate({
rules: {
title: {
required: false
},
origin: {
required: true
},
content: {
required: true
}
},
invalidHandler : function(){
return false;
},
submitHandler : function(){
$.ajax({
url: $form.attr('action'),
dataType: 'json',
type: 'post',
data: $form.serialize(),
success:function(data) {
if(data.success) {
alert('保存成功');
window.location.href = data.msg;
}else {
alert(data.msg);
}
},
error:function() {
}
});
return false;
}
});
});
</script>
</body>
</html>
--------------------------------------------------------------------------ssm---------------------------------------------------------------------------------------------------------------
@RequestMapping(value="/upload/{id}",method=RequestMethod.POST) @ResponseBody public void upload(@PathVariable int id,HttpServletResponse response,@RequestParam(value="appFile",required=false)MultipartFile appFile,@RequestParam(value="file1",required=false)MultipartFile file1) throws IOException { JSONObject jo = new JSONObject(); String result = ""; String path = ""; if(appFile!=null){ if(appFile.getSize()>1048576*2){ result = "510"; }else{ path = UploadKit.uploadFile(appFile); result = "1"; } }else if(file1!=null){ if(file1.getSize()>1048576*200){ result = "410"; }else{ path = UploadKit.uploadFile(file1); result = "1"; } } jo.accumulate("path",path); jo.accumulate("result",result); response.getWriter().print(jo); }
