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

最新推荐文章于 2023-02-07 10:30:36 发布

flash8627

最新推荐文章于 2023-02-07 10:30:36 发布

阅读量695

点赞数

文章标签： upload function stylesheet class input file

本文链接：https://blog.csdn.net/flash8627/article/details/4800650

版权

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

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

flash8627

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的上传组件-开始完善2

前面JS写得有点乱，也有很多问题，在经历了不小心后，把文件全删除了，正好，写过一些次，再写修正了好多问题,也把js模块了 example.jsp <link rel="stylesheet" href="/include/upload/upload.css" mce_href="include/upload/upload.css" type="tex
复制链接

扫一扫