325 lines
10 KiB
Plaintext
325 lines
10 KiB
Plaintext
<%@page import="com.tenwa.util.QuartzPropertiesUtil"%>
|
||
<%@ page contentType="text/html; charset=GBK"%>
|
||
<%@include file="/Frame/resources/include/include_begin_info.jspf"%>
|
||
<%
|
||
//获得组件参数
|
||
String flowNo=CurPage.getParameter("FlowNo");
|
||
String fcRequestId = CurPage.getParameter("fcRequestId");
|
||
String fcFlowType = CurPage.getParameter("fcFlowType");
|
||
String fcFileCode = CurPage.getParameter("fcFileCode");
|
||
|
||
%>
|
||
<html>
|
||
<head>
|
||
<meta charset="GBK">
|
||
<title>File Upload</title>
|
||
<!--引入CSS-->
|
||
<link rel="stylesheet" type="text/css" href="<%=sWebRootPath%>/Frame/page/webuploader/webuploader.css">
|
||
<link rel="stylesheet" type="text/css" href="<%=sWebRootPath%>/Frame/page/webuploader/upload.css">
|
||
<link rel="stylesheet" type="text/css" href="<%=sWebRootPath%>/Frame/page/bootstrap/css/bootstrap.min.css"/>
|
||
<link rel="stylesheet" type="text/css" href="<%=sWebRootPath%>/Frame/page/bootstrap/css/bootstrap-theme.min.css"/>
|
||
<!--引入JS-->
|
||
<script type="text/javascript" src="<%=sWebRootPath%>/js/jquery/jquery-1.11.0.min.js"></script>
|
||
<script type="text/javascript" src="<%=sWebRootPath%>/Frame/page/webuploader/webuploader.js"></script>
|
||
<script type="text/javascript" src="<%=sWebRootPath%>/Frame/page/bootstrap/js/bootstrap.min.js"></script>
|
||
</head>
|
||
<body>
|
||
<div style="overflow:auto;height:500px">
|
||
<div class="form-group">
|
||
<table class="table table-striped">
|
||
<%-- <tr>
|
||
<td><label for="docType">一级分类</label><input readonly type="text" class="form-control" id="docType" value="<%=docType %>"></td>
|
||
<td><label for="oneClassify">二级分类</label><input readonly type="text" class="form-control" id="oneClassify" value="<%=oneClassify %>"></td>
|
||
</tr> --%>
|
||
<tr>
|
||
<td><h5><b>上传附件</b></h5></td>
|
||
</tr>
|
||
<!-- <tr>
|
||
<td colspan="2">
|
||
<label for="remark">备注</label>
|
||
<textarea class="form-control" rows="4" id="remark"></textarea>
|
||
</td>
|
||
</tr> -->
|
||
</table>
|
||
</div>
|
||
<div id="uploader" class="wu-example">
|
||
<div class="memo">未选择任何文件</div>
|
||
<!--用来存放文件信息-->
|
||
<div id="thelist" class="uploader-list filelist"></div>
|
||
<div class="btns">
|
||
<div id="picker" style="display:inline-block">选择文件</div>
|
||
<%
|
||
if(!"true".equals(QuartzPropertiesUtil.get("autoUpload"))) {%>
|
||
<button id="ctlBtn" class="btn btn-default">开始上传</button>
|
||
<%}
|
||
%>
|
||
<button id="backBtn" class="btn btn-default" style="margin-left:11px;" onclick="AsDialog.ClosePage();">返回</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
// 文件上传
|
||
jQuery(function() {
|
||
var $ = jQuery,
|
||
$list = $('#thelist'),
|
||
$btn = $('#ctlBtn'),
|
||
state = 'pending',
|
||
// 优化retina, 在retina下这个值是2
|
||
ratio = window.devicePixelRatio || 1,
|
||
|
||
// 缩略图大小
|
||
thumbnailWidth = 100 * ratio,
|
||
thumbnailHeight = 100 * ratio,
|
||
uploader,
|
||
|
||
percentages = {},
|
||
|
||
supportTransition = (function(){
|
||
var s = document.createElement('p').style,
|
||
r = 'transition' in s ||
|
||
'WebkitTransition' in s ||
|
||
'MozTransition' in s ||
|
||
'msTransition' in s ||
|
||
'OTransition' in s;
|
||
s = null;
|
||
return r;
|
||
})(),
|
||
|
||
uploader = WebUploader.create({
|
||
fileNumLimit: <%=QuartzPropertiesUtil.get("fileNumLimit") %>,
|
||
fileSizeLimit: <%=QuartzPropertiesUtil.get("fileSizeLimit") %> * 1024 * 1024,
|
||
fileSingleSizeLimit: <%=QuartzPropertiesUtil.get("fileSingleSizeLimit") %> * 1024 * 1024,
|
||
|
||
dnd: document.body,
|
||
paste: document.body,
|
||
disableGlobalDnd: true,
|
||
// 不压缩image
|
||
//resize: false,
|
||
//设置文件是否压缩，如果不压缩直接写false，如果需要压缩则需要添加对应的参数，详情请看百度文档。
|
||
compress:false,
|
||
|
||
auto: <%=QuartzPropertiesUtil.get("autoUpload") %>,
|
||
|
||
prepareNextFile: true,
|
||
|
||
threads:<%=QuartzPropertiesUtil.get("fileNumLimit") %>,
|
||
|
||
formData: {
|
||
fcRequestId:'<%=fcRequestId%>',
|
||
fcFlowType:'<%=fcFlowType%>',
|
||
fcFileCode:'<%=fcFileCode%>'
|
||
},
|
||
|
||
// swf文件路径
|
||
swf: '<%=sWebRootPath%>/Frame/page/webuploader/Uploader.swf',
|
||
|
||
// 文件接收服务端。
|
||
server: '<%=sWebRootPath%>/Ample/Doc/DocListUploadNew.jsp?CompClientID=<%=CurComp.getClientID()%>',
|
||
|
||
// 选择文件的按钮。可选。
|
||
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
|
||
pick: {
|
||
id: '#picker',
|
||
multiple: true
|
||
},
|
||
accept: {
|
||
extensions: '<%=QuartzPropertiesUtil.get("fileType") %>'
|
||
}
|
||
});
|
||
uploader.on('beforeFileQueued',function(file){
|
||
var reg = RegExp(/[%&',;=?$]/);
|
||
if(file.name.match(reg)){
|
||
AsDebug.alert("警告","上传出错！请不要上传名称中带有%&',;=?$等特殊字符的文件");
|
||
return false;
|
||
}
|
||
});
|
||
// 当有文件添加进来的时候
|
||
uploader.on( 'fileQueued', function( file ) {
|
||
var $li = $(
|
||
'<div id="' + file.id + '" class="file-item thumbnail">' +
|
||
'<img>' +
|
||
'<div class="info" style = "height:0px">' + file.name + '</div>' +
|
||
'</div>'
|
||
),
|
||
$img = $li.find('img');
|
||
|
||
var $btns = $('<div class="file-panel">' +
|
||
'<span class="cancel">取消</span>' +
|
||
'<span class="rotateRight">向左旋转</span>' +
|
||
'<span class="rotateLeft">向右旋转</span></div>').appendTo( $li );
|
||
|
||
|
||
$li.on( 'mouseenter', function() {
|
||
$btns.stop().animate({height: 30});
|
||
$li.find(".info").stop().animate({height: 20});
|
||
});
|
||
|
||
$li.on( 'mouseleave', function() {
|
||
$btns.stop().animate({height: 0});
|
||
$li.find(".info").stop().animate({height: 0});
|
||
});
|
||
|
||
percentages[file.id] = file.size;
|
||
file.rotation = 0;
|
||
|
||
$btns.on( 'click', 'span', function() {
|
||
var index = $(this).index()
|
||
|
||
switch ( index ) {
|
||
case 0:
|
||
removeFile( file );
|
||
return;
|
||
|
||
case 1:
|
||
file.rotation += 90;
|
||
break;
|
||
|
||
case 2:
|
||
file.rotation -= 90;
|
||
break;
|
||
}
|
||
|
||
if ( supportTransition ) {
|
||
deg = 'rotate(' + file.rotation + 'deg)';
|
||
$img.css({
|
||
'-webkit-transform': deg,
|
||
'-mos-transform': deg,
|
||
'-o-transform': deg,
|
||
'transform': deg
|
||
});
|
||
} else {
|
||
$img.css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')');
|
||
}
|
||
});
|
||
|
||
$list.append( $li );
|
||
|
||
// 创建缩略图
|
||
uploader.makeThumb( file, function( error, src ) {
|
||
if ( error ) {
|
||
$img.replaceWith('<span>无法预览</span>');
|
||
$li.css("width",thumbnailWidth + 10).css("height",thumbnailHeight + 10);
|
||
return;
|
||
}
|
||
|
||
$img.attr( 'src', src );
|
||
}, thumbnailWidth, thumbnailHeight );
|
||
$(".memo").hide();
|
||
});
|
||
|
||
// 文件上传过程中创建进度条实时显示。
|
||
uploader.on( 'uploadProgress', function( file, percentage ) {
|
||
var $li = $( '#'+file.id ),
|
||
$percent = $li.find('.progress span');
|
||
|
||
// 避免重复创建
|
||
if ( !$percent.length ) {
|
||
$percent = $('<p class="progress" style="height:7%"><span></span></p>')
|
||
.appendTo( $li )
|
||
.find('span');
|
||
}
|
||
|
||
$percent.css( 'width', percentage * 100 + '%' );
|
||
});
|
||
|
||
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
|
||
uploader.on( 'uploadSuccess', function( file, ret) {
|
||
file["attribute_id"] = ret["_raw"];
|
||
$( '#'+file.id ).addClass('upload-state-done');
|
||
});
|
||
|
||
// 文件上传失败，现实上传出错。
|
||
uploader.on( 'uploadError', function( file ) {
|
||
var $li = $( '#'+file.id ),
|
||
$error = $li.find('div.error');
|
||
|
||
// 避免重复创建
|
||
if ( !$error.length ) {
|
||
$error = $('<div class="error"></div>').appendTo( $li );
|
||
}
|
||
|
||
$error.text('上传失败');
|
||
});
|
||
|
||
uploader.on( 'all', function( type ) {
|
||
if ( type === 'startUpload' ) {
|
||
state = 'uploading';
|
||
} else if ( type === 'stopUpload' ) {
|
||
state = 'paused';
|
||
} else if ( type === 'uploadFinished' ) {
|
||
state = 'done';
|
||
}
|
||
|
||
if ( state === 'uploading' ) {
|
||
$btn.text('暂停上传');
|
||
} else {
|
||
$btn.text('开始上传');
|
||
}
|
||
});
|
||
|
||
$btn.on( 'click', function() {
|
||
if ( state === 'uploading' ) {
|
||
uploader.stop();
|
||
} else {
|
||
uploader.upload();
|
||
}
|
||
});
|
||
|
||
// 完成上传完了，成功或者失败，先删除进度条。
|
||
uploader.on( 'uploadComplete', function( file ) {
|
||
$( '#'+file.id ).find('.progress').remove();
|
||
});
|
||
|
||
uploader.on("error", function (type) {
|
||
if(file.name=='测试用图片.jpg'){
|
||
AsDebug.alert("警告","上传出错！");
|
||
}
|
||
if (type == "Q_TYPE_DENIED") {
|
||
AsDebug.alert("警告","请上传" + "<%=QuartzPropertiesUtil.get("fileType") %>".toUpperCase() + "格式文件");
|
||
} else if (type == "Q_EXCEED_SIZE_LIMIT") {
|
||
AsDebug.alert("警告","文件大小不能超过<%=QuartzPropertiesUtil.get("fileSingleSizeL imit") %>M");
|
||
}else {
|
||
AsDebug.alert("警告","上传出错！请检查后重新上传！错误代码"+type);
|
||
}
|
||
|
||
});
|
||
|
||
uploader.on( 'fileDequeued', function( file ) {
|
||
//removeFile( file );
|
||
});
|
||
|
||
function removeFile( file ) {
|
||
var $li = $('#'+file.id);
|
||
if(file["attribute_id"]) {
|
||
var result = AsControl.RunJsp("/Tenwa/Comm/DocList/DeleteDocFile.jsp", "AttributeId=" + file["attribute_id"]);
|
||
if(result == "FAILED") {
|
||
$error = $li.find('div.error');
|
||
|
||
// 避免重复创建
|
||
if ( !$error.length ) {
|
||
$error = $('<div class="error"></div>').appendTo( $li );
|
||
}
|
||
|
||
$error.text('删除失败');
|
||
return;
|
||
}
|
||
}
|
||
uploader.removeFile(file);
|
||
delete percentages[ file.id ];
|
||
|
||
var flag = false;
|
||
for(var p in percentages) {
|
||
flag = true;
|
||
break;
|
||
}
|
||
|
||
if(!flag) {
|
||
$(".memo").show();
|
||
}
|
||
$li.off().find('.file-panel').off().end().remove();
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|
||
<%@ include file="/Frame/resources/include/include_end.jspf"%> |