我的上传组件-开始完善2

来源：互联网发布：沙迪克火花机编程书编辑：程序博客网时间：2024/06/05 07:58

前面JS写得有点乱，也有很多问题，在经历了不小心后，把文件全删除了，正好，写过一些次，再写修正了好多问题,也把js模块了

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"></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">

AAA

upload_success.jsp

<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"></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"></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;}