我的上传组件-开始完善2
2009-11-12 01:13
134 查看
前面JS写得有点乱，也有很多问题，在经历了不小心后，把文件全删除了，正好，写过一些次，再写修正了好多问题,也把js模块了
example.jsp
example.jsp
<html>
<head>
<link rel="stylesheet" href="/include/upload/upload.css" mce_href="include/upload/upload.css"
type="text/css" />
<title>我的上传组件------测试页-示例页</title>
<mce:script type="text/javascript"
src="../../scripts/jquery/jquery-1.3.2.min.js"></mce:script>
<mce:script type="text/javascript" src="upload_example.js" mce_src="upload_example.js"></mce:script>
<mce:script type="text/javascript"><!--
//img:图片，zip:压缩文件
var byType = "img";
//保存文件的路径
var savePath = "/uploadfile/test";
//多传还是单传0为只能传单个文件1为多个
var status = 1;
$(document).ready( function() {
$('#uploadUrl').val("");
$('#removeUrl').val("");
//这里根据输出的图片再来取值取表单
$('#uploadUrl').val(result($(".resultUrl")));
$("a.removeBtn").click( function() {
//取iframe的内容
var frameNode=$("#upload_frame").contents().find(".resultImg");
//alert("frameNode: "+frameNode);
var str = addRemove($(this).attr("id"),$('#removeUrl').val(),$(this).parent());
//移除节点，重新返回
$('#removeUrl').val(str);
var val = result($(".resultUrl"))+result(frameNode);
$('#uploadUrl').val(val);
});
});
// --></mce:script>
<link rel="stylesheet" href="upload.css" mce_href="upload.css" type="text/css" />
</head>
<body>
<div id="result_body" style="width: 100%">
<h3>
以下测试，如果图片不等于空，如下预览，并且提供删除，修改的功能:
</h3>
<ul style="height: 76px;">
<li>
<img src="/uploadfile/test/20091111_203316_95921B.png" mce_src="uploadfile/test/20091111_203316_95921B.png"
class="resultUrl">
<a class="removeBtn"
id="/uploadfile/test/20091111_203316_95921B.png">删除</a>
</li>
<li>
<img src="/uploadfile/test/20091111_203316_62802B.png" mce_src="uploadfile/test/20091111_203316_62802B.png"
class="resultUrl">
<a class="removeBtn"
id="/uploadfile/test/20091111_203316_62802B.png">删除</a>
</li>
<li>
<img src="/uploadfile/test/20091111_203316_34378B.png" mce_src="uploadfile/test/20091111_203316_34378B.png"
class="resultUrl">
<a class="removeBtn"
id="/uploadfile/test/20091111_203316_34378B.png">删除</a>
</li>
</ul>
</div>
<div id="M_div" style="height: 336px;">
<iframe src="upload_success.jsp" mce_src="upload_success.jsp" width="336" height="168" id="upload_frame" name="upload_frame"
scrolling="auto" frameborder="0"></iframe>
</div>
<!--写到数据库的文件路径-->
<div id="target">
<textarea rows="6" cols="56" id="uploadUrl" name="uploadUrl"
readonly="readonly"><html>
<head>
<title>文件上传成功</title>
<link rel="stylesheet" href="/include/upload/upload.css" mce_href="include/upload/upload.css"
type="text/css" />
<mce:script type="text/javascript"
src="../../scripts/jquery/jquery-1.3.2.min.js"></mce:script>
<mce:script type="text/javascript" src="upload_example.js" mce_src="upload_example.js"></mce:script>
<mce:script language="javascript"><!--
//上级页面图片字段
var resultTag = $(window.parent.document).find('#uploadUrl');
var removeVal = $(window.parent.document).find('#removeUrl');
//alert("1: "+removeTag);
init = function(parentVal,thisVal){
$("#show").append(
'<img src="/images/loading.gif" mce_src="images/loading.gif" class="show_loading"/>');
$(window.parent.document).find('#target').show("fast");
//返回值给父页面的隐藏表单
//$(".show_loading").remove();
//取本页节点和上级页面节点值
var val = result(parentVal) +result(thisVal);
resultTag.val(val);
$("#show").hide();
}
window.onload = function() {
var parentVal = $(window.parent.document).find('.resultUrl');
var thisVal = $('.resultImg');
//alert("success: "+removeVal.val());
init(parentVal,thisVal);
/**/
$(".removeBtn").click( function() {
parentVal = $(window.parent.document).find('.resultUrl');
var str = addRemove($(this).attr("id"),removeVal.val(),$(this).parent());
//移除节点，重新返回
removeVal.val(str);
thisVal = $('.resultImg');
var val = result(parentVal) +result(thisVal);
resultTag.val(val);
});
}
// --></mce:script>
</head>
<body>
<div id="result_body">
<s:actionerror />
<s:fielderror></s:fielderror>
<h3>
上传成功，您上传的文件为：
</h3>
<ul>
<li>
<img src="/uploadfile/test/20091111_203316_95921.png" mce_src="uploadfile/test/20091111_203316_95921.png"
class="resultImg">
<a class="removeBtn"
id="/uploadfile/test/20091111_203316_95921.png">删除</a>
</li>
<li>
<img src="/uploadfile/test/20091111_203316_62802.png" mce_src="uploadfile/test/20091111_203316_62802.png"
class="resultImg">
<a class="removeBtn"
id="/uploadfile/test/20091111_203316_62802.png">删除</a>
</li>
<li>
<img src="/uploadfile/test/20091111_203316_34378.png" mce_src="uploadfile/test/20091111_203316_34378.png"
class="resultImg">
<a class="removeBtn"
id="/uploadfile/test/20091111_203316_34378.png">删除</a>
</li>
<s:iterator value="+targetFileName" status="stat">
<li>
<img src='<s:property value="+targetFileName[#stat.index]"/>'
class="resultImg" />
<a class="removeBtn"
id='<s:property value="+targetFileName[#stat.index]"></a>'>删除</a>
</li>
</s:iterator>
</ul>
<div id="show"></div>
</div>
</body>
</html>upload_example.js
/*
*/
result = function(node) {
var resultStr = "";
$(node).each( function() {
// alert($(this).attr("src"));
resultStr += $(this).attr("src") + ",/n";
});
// alert(resultStr);
return resultStr;
}
/**
* node : 删除的节点 srcVal:已经删除的值 reNode:删除的节点
*/
addRemove = function(node, srcVal, reNode) {
var resultStr = "";
if (srcVal != "" || srcVal != undefined) {
resultStr = srcVal + "/n" + node;
} else {
resultStr += node;
}
alert("删除文件-" + node);
reNode.remove();
return resultStr;
}upload.jsp
这里动态设了iframe的高度,设置的依据为css<html>
<head><title>文件上传</title>
<mce:script type="text/javascript"
src="/scripts/jquery/jquery-1.3.2.min.js"></mce:script>
<link rel="stylesheet" href="/include/upload/upload.css" mce_href="include/upload/upload.css" type="text/css"/>
<mce:script type="text/javascript"><!--
var i = 0;
$( function() {
into();
//点击删除
$('#add_file').click(function() {
addInputTr();
});
$("#sub_btn").click(function(){
if(getInputValue()=="")
alert("请选择上传的文件!");
else{
$(window.parent.document).find('#loading').show();
document.forms['uploae_sp'].submit();
}
});
});
//添加上传表单
addInputTr = function(){
i = i + 1;
var node = $("#src_node");
node.show();
//alert(tr_h + " " + i);
var new_id = "file_tr" + i;
var new_html = '<div class="file_tr" id="' + new_id + '"><input type="file" name="upload" size="36" class="upload_input" /><input type="button" class="del"></div>';
$("#src_node").append(new_html).find("div > .del").attr("onclick",
"del_tr(" + new_id + ")").click(function(){$(this).parent().remove();
});
//上级页面frame的高
var parent_frame_body = $(window.parent.document).find("body").find("#upload_frame");
var parentBodyHeight = parent_frame_body.height()+32;
//本级页面的高
var bodyHeight = $("#upload_body");
parent_frame_body.height(parentBodyHeight);
bodyHeight.height(parentBodyHeight+12);
//alert("添加表单---"+$(".file_tr").length+" height:"+parent_frame_body.height());
}
//取上传表单值
getInputValue = function(){
var inputVal = "";
var inputNode = $(".upload_input");
$(inputNode).each( function() {
if($(this).val()!=""){
//alert($(this).val());
inputVal += $(this).val() + ",";
}
});
return inputVal;
}
//初始化上传保存的路径等，参数
into = function() {
var status = window.parent.status;
var savePath = window.parent.savePath;
var byType = window.parent.byType;
if(status==0){
$("#add_file").hide();
}
if(savePath=="" || savePath==undefined){
savePath="/uploadfile/images";
}
if(byType=="" || byType==undefined){
byType="img";
}
//alert("savePath="+savePath+"/nbyType="+byType+"/nstatus="+status);
document.getElementById("byType").value = byType;
document.getElementById("savePath").value = savePath;
$("#src_node").hide();
}
// --></mce:script>
</head>
<body id="upload_body">
<form action="/upload.action" method="post" enctype="multipart/form-data" name="uploae_sp">
<div id="file_tr" class="file_tr">
<input type="file" name="upload" size="36" class="upload_input" />
</div>
<div id="src_node">
</div>
<div id="sub_tr">
<input type="hidden" name="token" id="token" value="<%=Token.getTokenString(session)%>">
<input type="hidden" name="savePath" id="savePath">
<input type="hidden" name="byType" id="byType">
<input type="button" value="添加…" id="add_file">
<input type="button" value="上传" id="sub_btn">
</div>
</form>
</body>
</html>
@CHARSET "UTF-8";
#upload_body{padding:0px;margin:0px;height:38px;overflow:hidden;overflow-x:hidden;overflow-y:hidden}
#M_div{width: 100%; height: 98%; margin: 18px auto;}
#src_node {
width: 330px;
float: left;
height: auto;
border: 1px dotted #AAA;
padding-top: 6px;
}
#file_tr {
width: 330px;
height: 26px;
float: left;
border:dotted #AAA; border-width:1px 1px 0px 1px ;
}
.file_tr {
width: 99%;
height: 26px;
float: left;
border-bottom: 1px dotted #AAA;
}
.file_tr input{height: 22px;line-height: 22px;}
.upload_input {
width: 286px;
height: 22px;
float: left;
padding: 0px;
margin: 0px;
border:1px solid #333333;
color:#666666;background:#FFF;
font:normal 12px Tahoma;
}
.upload_input button{height: 22px;padding: 0px; border:none;border:0px;
margin: 0px;}
.del {
width: 18px;
cursor: pointer;
height: 20px;
padding: 2px;
border: none; margin-left:12px;
background: url(/images/delete.png) no-repeat;
float: right;
}
#sub_tr {
float: left;
width: 330px;
height: 22px;
padding:6px 0px;margin:6px 0px;
text-align: center;
}
#result_body h3{width:100%;height:23px;line-height: 23px;color:#f90;font-weight: bold;}
#result_body *{padding:0px;margin:0px;}
#result_body ul{list-style-type: none;float: left;width: 100%;margin:8px 0px;}
#result_body ul li{width:80px;height:42px;float: left;margin-left:6px;}
#result_body ul li img{padding:2px;border:1px #AAA solid;width:76px;height:38px;float: left;}
#result_body ul li a{width:100%;height:26px;float: left;cursor: pointer; text-align: center;}
#uploadUrl,#removeUrl{width:96%;float: left;}
iframe {
border: 1px #369 solid;
margin: 0px auto; padding:3px;
}
#loading{width:224px;height:60px;background: URL(/include/upload/ajax-loading.gif) no-repeat;z-index: 1000;
position:absolute;top:28px;margin:0px auto;}
#target {
width:100%;margin:0px auto;
}
#removeTarget{width:100%;margin:0px auto;}
#if_tab {
position: absolute;
top: 18px;
float: right;
right: 16px;
width: 353px;
z-index: 200;
}
form,fieldset,legend{padding:0px;margin:0px; overflow:hidden;overflow-x:hidden;overflow-y:hidden}
#add_file{width:86px;height:22px;border:0px;border:none;color:#0087FD;background: #FFF;font-weight:bold;font-style: italic; font-size: 14px;}
#sub_btn{width:78px;height:22px;border:0px;border:none;color:#0087FD;background: #FFF; font-weight:bold;}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 我的上传组件-开始完善-1
- 我的上传组件-开始干活啦----3上传处理的action和其它方法
- 我的上传组件-开始干活啦----4上传成功的页面,提供预览，删除功能
- 我的上传组件-开始干活啦----1
- 从0开始做一个的Vue图片/ 文件选择(上传)组件[基础向]
- 我的上传组件-开始干活啦----2表单页面upload.jsp
- 基于commons-fileupload组件的实施上传下载与删除
- 用cos组件编写的上传简单sample
- 前端上传组件Plupload使用指南
- 通过ajax上传input组件文件
- Yii2.0-图片上传扩展（异步加载缩略图） [扩展组件]
- 最近在开始捡起java，所以会定期更新写java 的一些组件，有兴趣的朋友可以看下
- 主题：文件上传组件的比较与使用续
- 利用开源组件commons-fileupload上传图片文件(1)
- 在vue项目中使用element-ui的Upload上传组件
- Creator2中关于文件上传组件的使用
- 【转】[原创]ExtAspNet新春贺岁版 - 文件上传控件、复选框列表控件、完善布局管理、表格的行扩展列、完整的100多个中文示例、30多处BUG修正与功能增强、《ExtAspNet秘密花园》系列文章
- jspSmartUpload上传组件
- Web开发中的文件上传组件uploadify的使用
- 利用jspsmartupload组件来上传和下载文件