<%@page import="com.mango.core.Constant"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %><%@ taglib uri="/auth" prefix="oa"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
if(pageContext.getAttribute("path") == null){
pageContext.setAttribute("path", path);
}
%>
<link rel="shortcut icon" href="${path }/images/favicon.ico" type="image/x-icon" />
<title>云实验室</title>
<link href="${path}/css/style.css" rel="stylesheet" type="text/css"></link>
<link href="${path}/css/style_wrong.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="${path}/js/jquery.min.js"></script>
<link rel="stylesheet" href="${path}/js/artdialog/css/ui-dialog.css" />
<script type="text/javascript" src="${path}/js/artdialog/dist/dialog-min.js"></script>
<script type="text/javascript">
var contextPath = "${path}";//为了适应引用js文件的路径
</script>
<body>
<span id="container" ><input type="button" value="上传附件" id="pickfiles"></span>
<div id="hiddenTR"></div >
<table id="filelist" style="width: 100%;">
</table>
</body>
---------file.add.js
var uploader;
$(document).ready(function(){
initFileUpload();
});
function initFileUpload(){
var index = 0;//
uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : 'pickfiles',
container: document.getElementById('container'),
max_file_size: '50mb', // 文件上传最大限制。
chunk_size: '1mb', // 上传分块每块的大小,这个值小于服务器最大上传限制的值即可。
unique_names: true, // 上传的文件名是否唯一
url : contextPath+'/attachment/fileUpload.jhtml',//上传到后台
flash_swf_url : contextPath+'/js/upload/Moxie.swf',
silverlight_xap_url : contextPath+'/upload/js/Moxie.xap',
filters : {
prevent_duplicates : true //不允许选取重复文件
}
});
//在实例对象上调用init()方法进行初始化
uploader.init(function(){
//document.getElementById('filelist').innerHTML = '';
});
//错误处理
uploader.bind('Error', function (uploader, args) {
//发生错误
if (args.code == plupload.FILE_DUPLICATE_ERROR) {
showalert( args.file.name + '已在上传队列中!');
// showWindow("uploadError",650,200);
} else if (args.code == plupload.IMAGE_FORMAT_ERROR) {
showalert( args.file.name + '的图片格式暂不支持上传!');
} else if (args.code == plupload.IMAGE_DIMENSIONS_ERROR) {
showalert( args.file.name + '上传队列中文件超出50MB!');
} else if (args.code == plupload.FILE_EXTENSION_ERROR) {
showalert( args.file.name + '的文件格式暂不支持上传!');
} else if (args.code == plupload.FILE_SIZE_ERROR) {
showalert( args.file.name + '的文件大小超出50MB!');
} else if (args.code == plupload.IO_ERROR) {
showalert( args.file.name + '读取失败,请检查该文件是否存在,或被其他程序占用!');
}
});
// 添加文件
uploader.bind('FilesAdded',function(uploader,files){//后台上传到服务器后,将files拼成json返回到前台页面
plupload.each(files, function(file) {
$("#filelist").append("<tr id="+file.id+" >"+
"<td class=\"fileName\" ><span>"+file.name +"</span>(" + plupload.formatSize(file.size) + ")<span></span></td>"+
"<td class=\"fileTime\" >"+new Date().format("yyyy-MM-dd hh:mm")+"</td>"+
"<td class=\"fileOper\"><a href=\"javascript:removeFile('"+file.id+"')\" class=\"alinkmodify\">移除</a></td>"+
"</tr>");
});
uploader.start();
});
//上传进度
uploader.bind('UploadProgress',function(uploader,file){
//我们可以利用这些参数提供的信息来做比如更新UI,提示上传进度等操作
document.getElementById(file.id).getElementsByTagName('span')[1].innerHTML = '' + file.percent + "%";
});
// 开始上传
// $("#uploadfiles").click(function(){
// uploader.start();
// });
// 上传完成之后
uploader.bind('FileUploaded',function(uploader,file,responseObject){
if(responseObject.status==200){
var result = eval('('+responseObject.response+')');
// 图片名称 和地址 放置在隐藏域中
$("#hiddenTR").append("<input type=\"hidden\" name=\"fileName\" id=\"fileName"+index+"\" value=\""+file.name+"\"/>"+
"<input type=\"hidden\" name=\"filePath\" id=\"filePath"+index+"\" value=\""+result.filePath+"\"/>");
//$("#fileName" + index).val(file.name);
//$("#filePath" + index).val(result.filePath);
index = index +1;
if($("#upFile") != undefined){
$("#upFile").show();
}
}else{
alert(result);
}
});
}
/**
* 删除文件
*/
function removeFile(fileId){
$("tr[id='" + fileId + "']").remove();// 删除当前行
}
--------file.edit.js
var uploader;
$(document).ready(function(){
var index = 0;//
uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
max_file_size: '50mb', // 文件上传最大限制。
browse_button : 'pickfiles',
container: document.getElementById('container'),
url : contextPath+'/attachment/fileUpload.jhtml',
flash_swf_url : contextPath+'/js/upload/Moxie.swf',
silverlight_xap_url: contextPath+'/upload/js/Moxie.xap',
filters : {
// mime_types : [ //只允许上传图片和zip文件
// { title : "图片格式", extensions : "jpg,gif,png,jpeg" },
// { title : "压缩包格式", extensions : "zip,rar" },
// { title : "OFFICE格式", extensions : "doc,docx,ppt,pptx,xls,xlsx,rtf,txt" }
// ],
prevent_duplicates : true //不允许选取重复文件
}
});
//在实例对象上调用init()方法进行初始化
uploader.init(function(){
//document.getElementById('filelist').innerHTML = '';
});
//错误处理
uploader.bind('Error', function (uploader, args) {
//发生错误
if (args.code == plupload.FILE_DUPLICATE_ERROR) {
showalert('文件错误:' + args.file.name + '已在上传队列中!');
// showWindow("upload