jquery上传文件显示进度条，亲测
来源：互联网 发布：javascript知识点总结 编辑：程序博客网 时间：2024/06/04 23:27
<%@ page import="java.util.Date" %>
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
request.setAttribute("date", new Date());
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=“X-UA-Compatible” content=“IE=8″>
<style type="text/css">
#parent{width:550px; height:10px; border:2px solid #09F;}
#son {width:0; height:100%; background-color:#09F; text-align:center; line-height:10px; font-size:20px; font-weight:bold;}
</style>
<%@include file="/WEB-INF/views/common/common.jsp" %>
<!-- Bootstrap core CSS -->
<link href="static/static/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="${base_href}/resources/common/bootstrap3/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="${base_href}/resources/common/css/form-theme.css" rel="stylesheet">
<link type="text/css" href="${base_href}/resources/common/Validate/validationEngine.jquery.css" rel="stylesheet">
<link href="${base_href}/resources/common/Umeditor/themes/default/css/umeditor.css" type="text/css"
rel="stylesheet">
<link rel="stylesheet" href="${base_href}/resources/common/utils/FileUpload.css" type="text/css">
<link rel="stylesheet" type="text/css" href="${base_href}/resources/common/video/video-js.css"/>
<link rel="stylesheet" href="${base_href}/resources/common/bootstrap3/css/bootstrap.min.css">
<script src="${base_href}/resources/common/bootstrap3/js/bootstrap.min.js"></script>
<script src="${base_href}/resources/common/video/video.js" type="text/javascript" charset="utf-8"></script>
<script>
videojs.options.flash.swf = "${base_href}/resources/common/video/video-js.swf";
</script>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="350">
<div class="main-wrap">
</div>
<!-- 工具条 start-->
<div class="container-fluid form-body-header">
<div class="container">
<div class="row tool-bar">
<div class="col-xs-12">
<button type="button" class="btn btn-sm tool-btn" id="close">关闭
</button>
<button type="submit" class="btn btn-sm tool-btn" id="save">保存</button>
</div>
</div>
</div>
</div>
<!-- 工具条 end-->
<!-- 表单 start-->
<div class="container-fluid">
<form id="form">
<div class="container form-body-div">
<div class="row text-center title-body">
<h2>${cmsModule.moduleName}</h2>
</div>
<input type="hidden" value="${cmsModule.moduleId}" name="moduleId">
<input type="hidden" value="${empty cmsInfo.creatorId ?CMS_USER.userId:cmsInfo.creatorId}" name="creatorId">
<input type="hidden" value="${empty cmsInfo.creatorName ?CMS_USER.username:cmsInfo.creatorName}"
name="creatorName">
<input type="hidden" id="a" value="${empty cmsInfo.creatorDeptId ?CMS_USER.deptmentId:cmsInfo.creatorDeptId}"
name="creatorDeptId">
<input type="hidden" value="${empty cmsInfo.creatorDeptName ?CMS_USER.deptmentName:cmsInfo.creatorDeptName}"
name="creatorDeptName">
<input type="hidden" value="${empty cmsInfo.infoId ? seq:cmsInfo.infoId}" name="infoId">
<input type="hidden" value="${cmsInfo.categoryId}" >
<input type="hidden" value="${cmsInfo.resourcePath}" name="resourcePath">
<input type="hidden" value="${cmsInfo.resourceThumb}" name="resourceThumb">
<input type="hidden" value="478" name="thumbWidth">
<input type="hidden" value="360" name="thumbHeight">
<input type="hidden" value="${cmsInfo.resourceName}" name="resourceName">
<input type="hidden" value="<fmt:formatDate value="${date}" type="both" pattern="yyyy-MM-dd HH:mm:ss"/>"
name="updateTime">
<input type="hidden" value="${CMS_USER.username}" name="operator">
<input type="hidden" value="${empty cmsInfo.status?-1:cmsInfo.status}" name="status">
<input type="hidden" id="videoPath" value="${cmsInfo.videoPath}" name="videoPath">
<input type="hidden" id="imgPath" value="${cmsInfo.imgPath}" name="imgPath">
<div class="row pannel-title">
<span>基本信息</span>
</div>
<div class="row pannel-body">
<table class="form-table">
<tr>
<th class="col-xs-2 text-center">
发布部门
</th>
<td class="col-xs-4">
<span>${empty cmsInfo.creatorDeptName ?CMS_USER.deptmentName:cmsInfo.creatorDeptName}</span>
</td>
<th class="col-xs-2 text-center">
投稿人省份
</th>
<td class="col-xs-10" colspan="3">
<select class="form-control validate[required,maxSize[100],minSize[2]]" name="provinces">
<c:forEach items="${list}" var="it">
<c:if test="${cmsInfo.provinces eq it.code}">
<option value ="${cmsInfo.provinces}">${it.value}</option>
</c:if>
</c:forEach>
<c:forEach items="${list}" var="it">
<option value ="${it.code}">${it.value}</option>
</c:forEach>
</select>
<%-- <input id="infoTitle" type="text"
class="form-control validate[required,maxSize[100],minSize[2]]" name="provinces"
value='${cmsInfo.provinces}'> --%>
</td>
</tr>
<tr>
<th class="col-xs-2 text-center">
发布日期
</th>
<td class="col-xs-4">
<input type="hidden" name="createTime"
value="<fmt:formatDate value="${empty cmsInfo.createTime?date:cmsInfo.createTime}" type="both" pattern="yyyy-MM-dd HH:mm:ss"/>">
<span><fmt:formatDate value="${empty cmsInfo.createTime?date:cmsInfo.createTime}"
type="both" pattern="yyyy-MM-dd HH:mm:ss"/> </span>
</td>
<th class="col-xs-2 text-center">
投稿人部门
</th>
<td class="col-xs-10" colspan="3">
<input id="infoTitle" type="text"
class="form-control validate[required,maxSize[100],minSize[2]]" name="contributerDep"
value='${cmsInfo.contributerDep}'>
</td>
</tr>
<tr>
<th class="col-xs-2 text-center">
发布人
</th>
<td class="col-xs-4">
<span>${empty cmsInfo.creatorName ?CMS_USER.username:cmsInfo.creatorName}</span>
</td>
<th class="col-xs-2 text-center">
投稿人姓名
</th>
<td class="col-xs-10" colspan="3">
<input id="infoTitle" type="text"
class="form-control validate[required,maxSize[100],minSize[2]]" name="contributerName"
value='${cmsInfo.contributerName}'>
</td>
</tr>
<tr>
<th class="text-center">
标题
</th>
<td colspan="3">
<input id="infoTitle" type="text"
class="form-control validate[required,maxSize[100],minSize[2]]" name="infoTitle"
value='${cmsInfo.infoTitle}'>
</td>
</tr>
<tr>
<th class="col-xs-2 text-center">
信息类型
</th>
<td class="col-xs-4" >
<select class="form-control validate[required,maxSize[100],minSize[2]]" onchange="cascade('${cmsModule.moduleId}')" id="fist">
<c:if test="${!empty cmsInfo.categoryId }">
<option value ="${cTypeById.typeId}">${cTypeById.typeName}</option>
</c:if>
<c:if test="${empty cmsInfo.categoryId }">
<option value ="">--请选择信息类型--</option>
</c:if>
<c:forEach items="${listType}" var="it">
<option value ="${it.typeId}">${it.typeName}</option>
</c:forEach>
</select>
</td>
<td class="col-xs-10" colspan="3">
<select class="form-control validate[required,maxSize[100],minSize[2]]" name="categoryId" id="secon">
<c:if test="${!empty cmsInfo.categoryId }">
<option value ="${conByKey.code}">${conByKey.value}</option>
<c:forEach items="${conslist}" var="it">
<option value ="${it.code}">${it.value}</option>
</c:forEach>
</c:if>
<option value="">---请选择信息类型---</option>
</select>
</td>
</tr>
<!-- 视频 -->
<tr>
<th class="col-xs-2 text-center">
<input id="file" type="file" name="fileVideo" />
<input type="button" id="videoPic" value="截图"/>
<input type="button" name="saveVideo" id="submit" class="btn" value="上传"/>
</th>
<td colspan="3">
<div class="progress" style="display:none" >
<div class="progress-bar" style="width:0%"></div>
</div>
<div id="imgSmallView">
<input id="pic" type="hidden" value="" name="picName">
</div>
<div id="videoURL">
<c:if test="${!empty cmsInfo.videoPath}">
<video id="example_video_1" poster="${base_href}/${cmsInfo.imgPath}" class="video-js vjs-default-skin" controls preload="none" width="500" height="300" data-setup="{}">
<source src="${base_href}/${cmsInfo.videoPath}" type="video/mp4" />
</video>
</c:if>
</div>
</td>
</tr>
</table>
</div>
</div>
</form>
</div>
<!-- common -->
<script src="${base_href}/resources/common/jquery/1.11.3/jquery.js"></script>
<!-- umeditor -->
<script type="text/javascript" charset="utf-8" src="${base_href}/resources/common/Umeditor/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${base_href}/resources/common/Umeditor/umeditor.min.js"></script>
<script type="text/javascript" src="${base_href}/resources/common/Umeditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" charset="utf-8"
src="${base_href}/resources/common/Validate/jquery.validationEngine.js"></script>
<script type="text/javascript" charset="utf-8"
src="${base_href}/resources/common/Validate/jquery.validationEngine-zh_CN.js"></script>
<script type="text/javascript" src="${base_href}/resources/common/fileUpload/vendor/jquery.ui.widget.js"></script>
<script type="text/javascript" src="${base_href}/resources/common/fileUpload/jquery.fileupload.js"></script>
<script type="text/javascript" src="${base_href}/resources/common/fileUpload/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="${base_href}/resources/common/utils/FileUpload.js"></script>
<script type="text/javascript" src="${base_href}/resources/applications/video/js/form.js"></script>
<script type="text/javascript">
$(function () {
DemoForm.init('${empty cmsInfo.infoId ? seq:cmsInfo.infoId}','${cmsModule.moduleId}');
$("#submit").click(function(){
$('#videoURL').html("");
$(".progress-bar").width('0%');
$(".progress").show();
var formData = new FormData();
formData.append("file", document.getElementById('file').files[0]);
//formData.append("token", token_value);
$.ajax({
url: "/ClouldCms/cms/CmsVideo/insertVideo.action",
type: "POST",
data: formData,
dataType : "json",
processData: false, // 不要对data参数进行序列化处理，默认为true
contentType: false, // 不要设置Content-Type请求头，因为文件数据是以 multipart/form-data 来编码
xhr: function(){
myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){
myXhr.upload.addEventListener('progress',function(e) {
if (e.lengthComputable) {
var percent = Math.floor(e.loaded/e.total*100);
if(percent <= 100) {
// alert(percent);
// $("#J_progress_bar").progress('set progress', percent);
// $("#J_progress_label").html('已上传：'+percent+'%');
$(".progress-bar").width(percent+'%');
}
//if(percent >= 100) {
//$("#J_progress_label").html('文件上传完毕，请等待...');
//$("#J_progress_label").addClass('success');
//}
}
}, false);
}
return myXhr;
},
success: function(res){
//alert(res.flag);
if(res.flag){
//alert("123123");
var r = $("#videoPath").val(res.data);
//alert("上传视频成功");
$(".progress").hide();
$('#videoURL').html('<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="500" height="300" data-setup="{}"><source src="' + basePath + "/" + res.data + '" type="video/mp4" /></video>');
}
},
error: function(res) {
// 请求失败
console.log(res);
}
});
});
//上传视频
/** $("#submit").click(function(){
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
url : "/ClouldCms/cms/CmsVideo/insertVideo.action",
type : "POST",
data : formData,
dataType : "json",
cache: false,
processData: false,
contentType: false,
success:function(res) {
if(res.flag){
var r = $("#videoPath").val(res.data);
alert("上传视频成功"+res.data);
$('#videoURL').html('<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="500" height="300" data-setup="{}"><source src="' + basePath + "/" + res.data + '" type="video/mp4" /></video>');
}
}
});*/
/* $("#submit").click(function(){
ajaxFileUpload({
url:"/ClouldCms/cms/CmsVideo/insertVideo.action",
secureuri:false,
fileElement:"file",
dataType:"json",
success:function(data){
alert(data);
}
});
}); */
//截图，处理图片
$("#videoPic").on('click',function(){
// createIMG();
var scale = 0.5,
video = $('#videoURL').find('video')[0],
canvas = document.createElement("canvas"),
canvasFill = canvas.getContext('2d');
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;
canvasFill.drawImage(video, 0, 0, canvas.width, canvas.height);
var src = canvas.toDataURL("image/jpeg");
$('#imgSmallView').html('<img src="' + src + '" alt="预览图" width="250" height="150" />');
src = src.replace(/\+/g,"%2B");
//var imageDate = src.substring(23);
$.ajax({
url:"/ClouldCms/cms/CmsVideo/ImagePath.action",
type:"POST",
data:"data="+src,
dataType:"json",
success:function(res){
if(res.flag){
$("#imgPath").val(res.data);
alert("返回图片路径");
}
}
});
});
});
</script>
</body>
</html>
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
request.setAttribute("date", new Date());
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=“X-UA-Compatible” content=“IE=8″>
<style type="text/css">
#parent{width:550px; height:10px; border:2px solid #09F;}
#son {width:0; height:100%; background-color:#09F; text-align:center; line-height:10px; font-size:20px; font-weight:bold;}
</style>
<%@include file="/WEB-INF/views/common/common.jsp" %>
<!-- Bootstrap core CSS -->
<link href="static/static/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="${base_href}/resources/common/bootstrap3/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="${base_href}/resources/common/css/form-theme.css" rel="stylesheet">
<link type="text/css" href="${base_href}/resources/common/Validate/validationEngine.jquery.css" rel="stylesheet">
<link href="${base_href}/resources/common/Umeditor/themes/default/css/umeditor.css" type="text/css"
rel="stylesheet">
<link rel="stylesheet" href="${base_href}/resources/common/utils/FileUpload.css" type="text/css">
<link rel="stylesheet" type="text/css" href="${base_href}/resources/common/video/video-js.css"/>
<link rel="stylesheet" href="${base_href}/resources/common/bootstrap3/css/bootstrap.min.css">
<script src="${base_href}/resources/common/bootstrap3/js/bootstrap.min.js"></script>
<script src="${base_href}/resources/common/video/video.js" type="text/javascript" charset="utf-8"></script>
<script>
videojs.options.flash.swf = "${base_href}/resources/common/video/video-js.swf";
</script>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="350">
<div class="main-wrap">
</div>
<!-- 工具条 start-->
<div class="container-fluid form-body-header">
<div class="container">
<div class="row tool-bar">
<div class="col-xs-12">
<button type="button" class="btn btn-sm tool-btn" id="close">关闭
</button>
<button type="submit" class="btn btn-sm tool-btn" id="save">保存</button>
</div>
</div>
</div>
</div>
<!-- 工具条 end-->
<!-- 表单 start-->
<div class="container-fluid">
<form id="form">
<div class="container form-body-div">
<div class="row text-center title-body">
<h2>${cmsModule.moduleName}</h2>
</div>
<input type="hidden" value="${cmsModule.moduleId}" name="moduleId">
<input type="hidden" value="${empty cmsInfo.creatorId ?CMS_USER.userId:cmsInfo.creatorId}" name="creatorId">
<input type="hidden" value="${empty cmsInfo.creatorName ?CMS_USER.username:cmsInfo.creatorName}"
name="creatorName">
<input type="hidden" id="a" value="${empty cmsInfo.creatorDeptId ?CMS_USER.deptmentId:cmsInfo.creatorDeptId}"
name="creatorDeptId">
<input type="hidden" value="${empty cmsInfo.creatorDeptName ?CMS_USER.deptmentName:cmsInfo.creatorDeptName}"
name="creatorDeptName">
<input type="hidden" value="${empty cmsInfo.infoId ? seq:cmsInfo.infoId}" name="infoId">
<input type="hidden" value="${cmsInfo.categoryId}" >
<input type="hidden" value="${cmsInfo.resourcePath}" name="resourcePath">
<input type="hidden" value="${cmsInfo.resourceThumb}" name="resourceThumb">
<input type="hidden" value="478" name="thumbWidth">
<input type="hidden" value="360" name="thumbHeight">
<input type="hidden" value="${cmsInfo.resourceName}" name="resourceName">
<input type="hidden" value="<fmt:formatDate value="${date}" type="both" pattern="yyyy-MM-dd HH:mm:ss"/>"
name="updateTime">
<input type="hidden" value="${CMS_USER.username}" name="operator">
<input type="hidden" value="${empty cmsInfo.status?-1:cmsInfo.status}" name="status">
<input type="hidden" id="videoPath" value="${cmsInfo.videoPath}" name="videoPath">
<input type="hidden" id="imgPath" value="${cmsInfo.imgPath}" name="imgPath">
<div class="row pannel-title">
<span>基本信息</span>
</div>
<div class="row pannel-body">
<table class="form-table">
<tr>
<th class="col-xs-2 text-center">
发布部门
</th>
<td class="col-xs-4">
<span>${empty cmsInfo.creatorDeptName ?CMS_USER.deptmentName:cmsInfo.creatorDeptName}</span>
</td>
<th class="col-xs-2 text-center">
投稿人省份
</th>
<td class="col-xs-10" colspan="3">
<select class="form-control validate[required,maxSize[100],minSize[2]]" name="provinces">
<c:forEach items="${list}" var="it">
<c:if test="${cmsInfo.provinces eq it.code}">
<option value ="${cmsInfo.provinces}">${it.value}</option>
</c:if>
</c:forEach>
<c:forEach items="${list}" var="it">
<option value ="${it.code}">${it.value}</option>
</c:forEach>
</select>
<%-- <input id="infoTitle" type="text"
class="form-control validate[required,maxSize[100],minSize[2]]" name="provinces"
value='${cmsInfo.provinces}'> --%>
</td>
</tr>
<tr>
<th class="col-xs-2 text-center">
发布日期
</th>
<td class="col-xs-4">
<input type="hidden" name="createTime"
value="<fmt:formatDate value="${empty cmsInfo.createTime?date:cmsInfo.createTime}" type="both" pattern="yyyy-MM-dd HH:mm:ss"/>">
<span><fmt:formatDate value="${empty cmsInfo.createTime?date:cmsInfo.createTime}"
type="both" pattern="yyyy-MM-dd HH:mm:ss"/> </span>
</td>
<th class="col-xs-2 text-center">
投稿人部门
</th>
<td class="col-xs-10" colspan="3">
<input id="infoTitle" type="text"
class="form-control validate[required,maxSize[100],minSize[2]]" name="contributerDep"
value='${cmsInfo.contributerDep}'>
</td>
</tr>
<tr>
<th class="col-xs-2 text-center">
发布人
</th>
<td class="col-xs-4">
<span>${empty cmsInfo.creatorName ?CMS_USER.username:cmsInfo.creatorName}</span>
</td>
<th class="col-xs-2 text-center">
投稿人姓名
</th>
<td class="col-xs-10" colspan="3">
<input id="infoTitle" type="text"
class="form-control validate[required,maxSize[100],minSize[2]]" name="contributerName"
value='${cmsInfo.contributerName}'>
</td>
</tr>
<tr>
<th class="text-center">
标题
</th>
<td colspan="3">
<input id="infoTitle" type="text"
class="form-control validate[required,maxSize[100],minSize[2]]" name="infoTitle"
value='${cmsInfo.infoTitle}'>
</td>
</tr>
<tr>
<th class="col-xs-2 text-center">
信息类型
</th>
<td class="col-xs-4" >
<select class="form-control validate[required,maxSize[100],minSize[2]]" onchange="cascade('${cmsModule.moduleId}')" id="fist">
<c:if test="${!empty cmsInfo.categoryId }">
<option value ="${cTypeById.typeId}">${cTypeById.typeName}</option>
</c:if>
<c:if test="${empty cmsInfo.categoryId }">
<option value ="">--请选择信息类型--</option>
</c:if>
<c:forEach items="${listType}" var="it">
<option value ="${it.typeId}">${it.typeName}</option>
</c:forEach>
</select>
</td>
<td class="col-xs-10" colspan="3">
<select class="form-control validate[required,maxSize[100],minSize[2]]" name="categoryId" id="secon">
<c:if test="${!empty cmsInfo.categoryId }">
<option value ="${conByKey.code}">${conByKey.value}</option>
<c:forEach items="${conslist}" var="it">
<option value ="${it.code}">${it.value}</option>
</c:forEach>
</c:if>
<option value="">---请选择信息类型---</option>
</select>
</td>
</tr>
<!-- 视频 -->
<tr>
<th class="col-xs-2 text-center">
<input id="file" type="file" name="fileVideo" />
<input type="button" id="videoPic" value="截图"/>
<input type="button" name="saveVideo" id="submit" class="btn" value="上传"/>
</th>
<td colspan="3">
<div class="progress" style="display:none" >
<div class="progress-bar" style="width:0%"></div>
</div>
<div id="imgSmallView">
<input id="pic" type="hidden" value="" name="picName">
</div>
<div id="videoURL">
<c:if test="${!empty cmsInfo.videoPath}">
<video id="example_video_1" poster="${base_href}/${cmsInfo.imgPath}" class="video-js vjs-default-skin" controls preload="none" width="500" height="300" data-setup="{}">
<source src="${base_href}/${cmsInfo.videoPath}" type="video/mp4" />
</video>
</c:if>
</div>
</td>
</tr>
</table>
</div>
</div>
</form>
</div>
<!-- common -->
<script src="${base_href}/resources/common/jquery/1.11.3/jquery.js"></script>
<!-- umeditor -->
<script type="text/javascript" charset="utf-8" src="${base_href}/resources/common/Umeditor/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${base_href}/resources/common/Umeditor/umeditor.min.js"></script>
<script type="text/javascript" src="${base_href}/resources/common/Umeditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" charset="utf-8"
src="${base_href}/resources/common/Validate/jquery.validationEngine.js"></script>
<script type="text/javascript" charset="utf-8"
src="${base_href}/resources/common/Validate/jquery.validationEngine-zh_CN.js"></script>
<script type="text/javascript" src="${base_href}/resources/common/fileUpload/vendor/jquery.ui.widget.js"></script>
<script type="text/javascript" src="${base_href}/resources/common/fileUpload/jquery.fileupload.js"></script>
<script type="text/javascript" src="${base_href}/resources/common/fileUpload/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="${base_href}/resources/common/utils/FileUpload.js"></script>
<script type="text/javascript" src="${base_href}/resources/applications/video/js/form.js"></script>
<script type="text/javascript">
$(function () {
DemoForm.init('${empty cmsInfo.infoId ? seq:cmsInfo.infoId}','${cmsModule.moduleId}');
$("#submit").click(function(){
$('#videoURL').html("");
$(".progress-bar").width('0%');
$(".progress").show();
var formData = new FormData();
formData.append("file", document.getElementById('file').files[0]);
//formData.append("token", token_value);
$.ajax({
url: "/ClouldCms/cms/CmsVideo/insertVideo.action",
type: "POST",
data: formData,
dataType : "json",
processData: false, // 不要对data参数进行序列化处理，默认为true
contentType: false, // 不要设置Content-Type请求头，因为文件数据是以 multipart/form-data 来编码
xhr: function(){
myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){
myXhr.upload.addEventListener('progress',function(e) {
if (e.lengthComputable) {
var percent = Math.floor(e.loaded/e.total*100);
if(percent <= 100) {
// alert(percent);
// $("#J_progress_bar").progress('set progress', percent);
// $("#J_progress_label").html('已上传：'+percent+'%');
$(".progress-bar").width(percent+'%');
}
//if(percent >= 100) {
//$("#J_progress_label").html('文件上传完毕，请等待...');
//$("#J_progress_label").addClass('success');
//}
}
}, false);
}
return myXhr;
},
success: function(res){
//alert(res.flag);
if(res.flag){
//alert("123123");
var r = $("#videoPath").val(res.data);
//alert("上传视频成功");
$(".progress").hide();
$('#videoURL').html('<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="500" height="300" data-setup="{}"><source src="' + basePath + "/" + res.data + '" type="video/mp4" /></video>');
}
},
error: function(res) {
// 请求失败
console.log(res);
}
});
});
//上传视频
/** $("#submit").click(function(){
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
url : "/ClouldCms/cms/CmsVideo/insertVideo.action",
type : "POST",
data : formData,
dataType : "json",
cache: false,
processData: false,
contentType: false,
success:function(res) {
if(res.flag){
var r = $("#videoPath").val(res.data);
alert("上传视频成功"+res.data);
$('#videoURL').html('<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="500" height="300" data-setup="{}"><source src="' + basePath + "/" + res.data + '" type="video/mp4" /></video>');
}
}
});*/
/* $("#submit").click(function(){
ajaxFileUpload({
url:"/ClouldCms/cms/CmsVideo/insertVideo.action",
secureuri:false,
fileElement:"file",
dataType:"json",
success:function(data){
alert(data);
}
});
}); */
//截图，处理图片
$("#videoPic").on('click',function(){
// createIMG();
var scale = 0.5,
video = $('#videoURL').find('video')[0],
canvas = document.createElement("canvas"),
canvasFill = canvas.getContext('2d');
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;
canvasFill.drawImage(video, 0, 0, canvas.width, canvas.height);
var src = canvas.toDataURL("image/jpeg");
$('#imgSmallView').html('<img src="' + src + '" alt="预览图" width="250" height="150" />');
src = src.replace(/\+/g,"%2B");
//var imageDate = src.substring(23);
$.ajax({
url:"/ClouldCms/cms/CmsVideo/ImagePath.action",
type:"POST",
data:"data="+src,
dataType:"json",
success:function(res){
if(res.flag){
$("#imgPath").val(res.data);
alert("返回图片路径");
}
}
});
});
});
</script>
</body>
</html>
阅读全文
0 0
- jquery上传文件显示进度条，亲测
- 文件上传进度条显示
- 上传文件时显示进度条
- struts2上传文件,显示进度条
- html5文件上传显示进度条
- android上传文件，显示进度条
- struts2上传文件,显示进度条
- Felx上传文件显示进度条
- DWR3 文件上传显示进度条
- Ajax文件上传，显示进度条
- struts2上传文件,显示进度条
- struts2上传文件,显示进度条
- JQuery和Servlet实现文件上传进度条,能显示上传速度，上传的百分比等
- jquery+ajax上传图片 显示进度条
- Jquery ajax 上传文件（有进度条）
- servlet+jquery实现文件上传进度条
- jquery-file-upload 文件上传，带进度条
- jQuery监听文件上传实现进度条效果
- 数位dp
- JS-Jquery 控制表单提交
- springboot实现页面跳转
- css布局中的position各种属性
- Hadoop平台的map-reduce
- jquery上传文件显示进度条，亲测
- 1.A+B问题 给出两个整数A和B, 求他们的和, 但不能使用 + 等数学运算符。
- 7-4 排座位
- 前端学习第七弹：固定位置的导航
- POJ 3140 Contestants Division——树形dp
- vue 非父子组件通信
- Tesseract-OCR识别中文与训练字库实例
- UIScrollView代理方法之一
- NOIP2012 开车旅行 倍增与模拟结合后的调试神题
