320 lines
11 KiB
HTML
320 lines
11 KiB
HTML
<style type="text/css">
|
||
|
||
#content {
|
||
border: 1px solid saddlebrown;
|
||
padding: 16px;
|
||
border-radius: 2px
|
||
}
|
||
|
||
.list {
|
||
top: 15px;
|
||
width: 140px;
|
||
height: 40px;
|
||
border: 1px solid #0082E6;
|
||
display: inline-block;
|
||
border-radius: 2px;
|
||
position: relative;
|
||
line-height: 40px;
|
||
}
|
||
|
||
#file {
|
||
position: absolute;
|
||
opacity: 0;
|
||
color: white;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 100;
|
||
}
|
||
|
||
.list span {
|
||
display: inline-block;
|
||
text-align: center;
|
||
width: 100%;
|
||
line-height: 40px;
|
||
position: absolute;
|
||
color: #0082E6;
|
||
}
|
||
|
||
video {
|
||
margin-top: 8px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
._p {
|
||
margin: 14px;
|
||
}
|
||
|
||
._p input {
|
||
display: inline-block;
|
||
width: 70%;
|
||
margin-left: 6px;
|
||
}
|
||
|
||
._p span {
|
||
font-size: 15px;
|
||
}
|
||
.container {
|
||
width: 100%;
|
||
height: 20px;
|
||
background-color: gray;
|
||
|
||
}
|
||
|
||
#progress {
|
||
height: 20px;
|
||
background-color: orange;
|
||
display: inline-block;
|
||
|
||
}
|
||
.btn {
|
||
text-align: center;
|
||
color: #0082E6;
|
||
width: 140px;
|
||
height: 41px;
|
||
border: 1px solid #0082E6;
|
||
display: inline-block;
|
||
border-radius: 2px;
|
||
position: relative;
|
||
line-height: 40px;
|
||
background-color: white;
|
||
}
|
||
.ploadname {
|
||
display: inline-block;
|
||
text-align: center;
|
||
color: #0082E6;
|
||
height: 40px;
|
||
display: inline-block;
|
||
border-radius: 2px;
|
||
position: relative;
|
||
line-height: 40px;
|
||
background-color: white;
|
||
}
|
||
|
||
</style>
|
||
<div class="easyui-layout" style="width:100%;height:100%;">
|
||
<form id="edu" method="post" name="edu" enctype="multipart/form-data">
|
||
<div data-options="region:'center'" style="padding:15px 15px;">
|
||
|
||
<table class="listTab">
|
||
<tr>
|
||
<td>标题：</td>
|
||
<td>
|
||
<input id="title" class="easyui-textbox" name="title" style="width:480px">
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>上传时间：</td>
|
||
<td>
|
||
<input id="submittime" editable="false" name="submittime" class="easyui-datetimebox" style="width:480px"
|
||
data-options="currentText:'今天',closeText:'关闭',showSeconds:false" />
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>文件描述：</td>
|
||
<td>
|
||
<input id="desciption" class="easyui-textbox" name="desciption" style="width:480px;height:100px" data-options="multiline:true" />
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>所属类别：</td>
|
||
<td>
|
||
<input id="cate" class="easyui-combotree" name="cate" style="width:480px" data-options="url:'api/questioncat?a=tree',loadFilter: function (rows) {
|
||
return convert(rows);
|
||
},">
|
||
</td>
|
||
</tr>
|
||
|
||
</table>
|
||
<div id="content">
|
||
|
||
<p class="_p">
|
||
<span>选择视频： </span>
|
||
<!--文件选择按钮-->
|
||
<a class="list" href="javascript:;">
|
||
<input id="file" type="file" name="myfile" onchange="UpladFile();" /><span>选择视频</span>
|
||
</a>
|
||
<button class="btn" type="button" onclick="sub();">上传</button>
|
||
|
||
</p>
|
||
<!--显示消失-->
|
||
<ul class="el-upload-list el-upload-list--text" style="display: none;list-style-type:none">
|
||
<li tabindex="0" class="el-upload-list__item is-success">
|
||
<a class="el-upload-list__item-name">
|
||
<i class="el-icon-document"></i><span class="ploadname" id="videoName">food.jpeg</span>
|
||
</a>
|
||
|
||
</li>
|
||
</ul>
|
||
<span id="url" style="display:none"></span>
|
||
<!--进度条-->
|
||
<div class="el-progress el-progress--line" style="display: none;">
|
||
<div class='container'>
|
||
<span id="progress"></span>
|
||
|
||
</div>
|
||
<!--上传速度显示-->
|
||
<span id="time"></span>
|
||
</div>
|
||
|
||
|
||
<!--预览框-->
|
||
<div class="preview">
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<div id='southdiv' data-options="region:'south'" style="height:50px;text-align:center;padding:5px">
|
||
<a href="javascript:void(0)" iconCls="fa-check" class="easyui-linkbutton" onclick="wssubmitForm()" id="submitb">提交</a>
|
||
<a href="javascript:void(0)" iconCls="fa-close" class="easyui-linkbutton" onclick="closeForm()">取消</a>
|
||
</div>
|
||
|
||
</form>
|
||
</div>
|
||
<script type="text/javascript">
|
||
|
||
function wssubmitForm() {
|
||
|
||
|
||
var edudata = $('#edu').serializeJSON();
|
||
edudata['url'] = document.getElementById('url').innerHTML;
|
||
|
||
$.ajax({
|
||
type: "POST",
|
||
url: 'edu/api?a=addwj',
|
||
data: JSON.stringify(edudata),
|
||
datatype: "json",
|
||
processData: false,
|
||
contentType: "application/json;charset=utf-8",
|
||
beforeSend: function () {
|
||
var bo = $('#edu').form('validate')
|
||
if (bo == false) {
|
||
return bo
|
||
} else {
|
||
$('#submitb').linkbutton('disable');
|
||
}
|
||
},
|
||
success: function (data) {
|
||
if (data.code == 1) {
|
||
alert("数据保存！");
|
||
$('#edutab').datagrid('reload');
|
||
$("#dd").dialog("close");
|
||
} else { $.messager.alert('提示', '失败!'); }
|
||
$('#submitb').linkbutton('enable');
|
||
},
|
||
});
|
||
|
||
}
|
||
|
||
var xhr;//异步请求对象
|
||
var ot; //时间
|
||
var oloaded;//大小
|
||
//上传文件方法
|
||
function UpladFile() {
|
||
var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
|
||
if (fileObj.name) {
|
||
$(".el-upload-list").css("display", "block");
|
||
$(".el-upload-list li").css("border", "1px solid #20a0ff");
|
||
$("#videoName").text(fileObj.name);
|
||
} else {
|
||
alert("请选择文件");
|
||
}
|
||
}
|
||
|
||
/*点击提交*/
|
||
function sub() {
|
||
var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
|
||
if (fileObj == undefined || fileObj == "") {
|
||
alert("请选择文件");
|
||
return false;
|
||
};
|
||
var imagSize = document.getElementById("file").files[0].size;
|
||
if (imagSize > 1024 * 1024 * 10) {
|
||
alert("视频大小为：" + (imagSize / (1024 * 1024)).toFixed(2) + "M，超出了上传大小，" + "请选择3M以内的视频！");
|
||
return false;
|
||
}
|
||
var url = "edu/api/upload"; // 接收上传文件的后台地址
|
||
var form = new FormData(); // FormData 对象
|
||
form.append("mf",fileObj); // 文件对象
|
||
xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
|
||
xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
|
||
xhr.onload = uploadComplete; //请求完成
|
||
xhr.onerror = uploadFailed; //请求失败
|
||
xhr.upload.onprogress = progressFunction; //【上传进度调用方法实现】
|
||
xhr.upload.onloadstart = function () { //上传开始执行方法
|
||
ot = new Date().getTime(); //设置上传开始时间
|
||
oloaded = 0; //设置上传开始时，以上传的文件大小为0
|
||
};
|
||
xhr.send(form); //开始上传，发送form数据
|
||
}
|
||
|
||
//上传进度实现方法，上传过程中会频繁调用该方法
|
||
function progressFunction(evt) {
|
||
// event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
|
||
if (evt.lengthComputable) {
|
||
|
||
$(".el-progress--line").css("display", "block");
|
||
var percent = Math.round(evt.loaded * 100 / evt.total);
|
||
|
||
/*进度条显示进度*/
|
||
document.getElementById('progress').innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
|
||
document.getElementById('progress').style.width = percent.toFixed(2) + '%';
|
||
|
||
}
|
||
|
||
var time = document.getElementById("time");
|
||
var nt = new Date().getTime(); //获取当前时间
|
||
var pertime = (nt - ot) / 1000; //计算出上次调用该方法时到现在的时间差，单位为s
|
||
ot = new Date().getTime(); //重新赋值时间，用于下次计算
|
||
|
||
var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位b
|
||
oloaded = evt.loaded; //重新赋值已上传文件大小，用以下次计算
|
||
|
||
//上传速度计算
|
||
var speed = perload / pertime; //单位b/s
|
||
var bspeed = speed;
|
||
var units = 'b/s'; //单位名称
|
||
if (speed / 1024 > 1) {
|
||
speed = speed / 1024;
|
||
units = 'k/s';
|
||
}
|
||
if (speed / 1024 > 1) {
|
||
speed = speed / 1024;
|
||
units = 'M/s';
|
||
}
|
||
speed = speed.toFixed(1);
|
||
//剩余时间
|
||
var resttime = ((evt.total - evt.loaded) / bspeed).toFixed(1);
|
||
time.innerHTML = '上传速度：' + speed + units + ',剩余时间：' + resttime + 's';
|
||
if (bspeed == 0)
|
||
time.innerHTML = '上传已取消';
|
||
}
|
||
//上传成功响应
|
||
function uploadComplete(evt) {
|
||
//服务断接收完文件返回的结果 注意返回的字符串要去掉双引号
|
||
|
||
if (evt.target.responseText) {
|
||
var data = JSON.parse(evt.target.responseText);
|
||
if (data.code = 1) {
|
||
|
||
var str = data.filepath;
|
||
document.getElementById('url').innerHTML = str;
|
||
alert("上传成功！");
|
||
$(".preview").append("<video controls='' autoplay='' style='width:200px;height；200px' name='media'><source src=" + str + " type='video/mp4'></video>");
|
||
}
|
||
} else {
|
||
alert("上传失败");
|
||
}
|
||
}
|
||
//上传失败
|
||
function uploadFailed(evt) {
|
||
alert("上传失败！");
|
||
}
|
||
|
||
|
||
</script>
|