您的位置：首页 > Web前端 > HTML

我的上传组件-开始干活啦----4上传成功的页面,提供预览，删除功能

2009-11-10 04:44 519 查看

上传成功的页面:

这里需要提供删除和预览,突然想起，还要加个重新上传，稍后再加

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>

        <title>文件上传</title>

        <link rel="stylesheet" href="/include/upload/upload.css" type="text/css" />

        <script type="text/javascript"

            src="../../scripts/jquery/jquery-1.3.2.min.js"></script>

        <script language="javascript">



        //上级页面图片字段

        var resultTag = $(window.parent.document).find('#uploadUrl');

        //这里要防止上级页面已经有值,所以拼路径时要保留原值

        var removeTag = $(window.parent.document).find('#removeUrl');

        //alert("1: "+removeTag);

        function init() {

            $("#show").append(

                    '<img src="/images/loading.gif" class="show_loading"/>');



            //清空

            //resultTag.val();



            //返回产品给上级页面,并显示布局,显示布局在测试完后删除

            $(window.parent.document).find('#target').show("fast");

            //返回值给父页面的隐藏表单

            resultTag.val(result());

            $(".show_loading").remove();



            //document.getElementById("byType").value = byType;

            //document.getElementById("savePath").value = savePath;

            //window.close();

        }



    /*

    src :取值的目标

    dest:返回的目标

    */

    result = function(src,dest) {

        resultTag.val("");

        var resultStr = "";

        var srcNode = $(".resultImg");

        var len = 0;

        $(srcNode).each( function() {

            len++;

            //alert($(this).attr("src"));

                if (len < srcNode.length)

                    resultStr += $(this).attr("src") + ",";

                else

                    resultStr += $(this).attr("src");

            });

        //alert(resultStr);

        return resultStr;

    }

    //同样是返回结果，只是返回到删除的表单,供action删除文件用

    addRemove = function(r){

        var resultStr = "";

        if(removeTag.val()!=""){

            resultStr = removeTag.val() +","+ r;

        }else{

            resultStr += r;

        }

        //alert("3-"+removeTag.val());

        return resultStr;

    }



    window.onload = function() {

        //$(window.parent.document).find("#upload_frame").hide();

        //var htmlNode = $(window.document).find("html").html();

        //parent_node.val("upload_success.jsp");

        //alert("- "+htmlNode);

        //window.parent.html_val.val(htmlNode);

        init();

        //这个意思就是，呵呵，并不是拿js调用什么去删除文件，而是把要删除的文件传到父页面，用action删除

        $("a.removeBtn").click(function() {



            var str= addRemove($(this).attr("id"));

            //alert("str "+str);

            removeTag.val(str);



            $(this).parent().remove();

            //移除节点，重新返回

            resultTag.val(result());

        });

    }

</script>

    </head>

    <body>

        <div id="result_body">

            <s:actionerror />

            <s:fielderror></s:fielderror>

            <h3>

                上传成功，您上传的文件为：

            </h3>

            <ul>

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

                    </li>

                </s:iterator>

            </ul>

            <div id="show"></div>

        </div>

    </body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： function iterator stylesheet class action html

相关文章推荐

新的分享

章节导航