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

最新推荐文章于 2025-08-24 10:00:00 发布

原创最新推荐文章于 2025-08-24 10:00:00 发布 · 726 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#upload #function #stylesheet #class #input #file

前面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">

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