ajax 上傳視訊 h5及時播放
阿新 • • 發佈：2019-01-30
<%@ 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" onchange="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="提交" onclick="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" onchange="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" onclick="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" onchange="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" onclick="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>
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" onchange="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="提交" onclick="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" onchange="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" onclick="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" onchange="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" onclick="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);
}