jsp 简化获取相对路径,Uploader文件上传

<%@ page language="java"  pageEncoding="UTF-8" isELIgnored="false"%>
<%@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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值