Question

我一直在互联网上搜索没有运气的日子。我需要一个模态窗口来上传文件并将其他值传递给脚本。当用户点击＆＃34时，需要打开模态窗口;这是问题＃＆＃34;。以下是我目前的脚本。任何帮助或方向将不胜感激。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>    
<style>
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    li {
        /*background-image: url(/images/page.png);*/
        background-position: 0 1px;
        background-repeat: no-repeat;
        padding-left: 20px;
    }

    a {
        color: #000000;
        cursor: pointer;
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

    .hidden {
    display:none;
    }
</style>
<script src="/js/jquery-1.11.1.js"></script>
    <script type="text/javascript">
        function addLine(what) {
            $("#" + what).append('<li>URL to uploaded document</li>');
        };

        function myToggle(what){
            $("#" + what).toggleClass('hidden');
        };
</script>
</head>

<body>
    <ul>
        <li class="folder">
            <a href="#" onClick="myToggle('Test1');">Test</a>
            <ul class="hidden" id="Test1">
                <li class="folder">
                    <a href="#" onClick="myToggle('Test1-2');">Test1-2</a>
                    <ul class="hidden" id="Test1-2">
                        <li>
                            <a href="#" onClick="addLine('Question1');">This is Question 1</a>
                            <ul id="Question1"></ul>
                        </li>
                        <li>
                            <a href="#" onClick="addLine('Question2');">This is Question 2</a>
                            <ul id="Question2"></ul>
                        </li>
                        <li>
                            <a href="#" onClick="addLine('Question3');">This is Question 1</a>
                            <ul id="Question3"></ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

Answer 1

尝试使用Ravishanker Kusuma＆＃39; jQuery File Upload Plugin，在这里：

http://hayageek.com/docs/jquery-upload-file.php

要使对话框模态化，您只需要创建一个这样的div：

<div id="myOverlay"></div>

并将其设为这样：

#myOverlay {height:100%;width:100%;position:absolute;top:0px;left:0px;overflow:hidden;background:black;opacity:0.5;z-index:10;}

最初隐藏叠加DIV（通过将display:none;附加到上面的css的末尾）。如果希望它可见，请删除display:none;。如果可见，它将覆盖页面的所有其余部分，但上传表单必须具有更高的z-index值。

制作对话模式真的很简单。

所以，使用Ravi的代码，你只需显示这样的DIV：

See This jsFiddle Demo

HTML：

<link href="http://hayageek.github.io/jQuery-Upload-File/uploadfile.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://hayageek.github.io/jQuery-Upload-File/jquery.uploadfile.min.js"></script>

<div id="myOverlay"></div>
<div id="box">
    <div id="box-inside-div">
        <div id="fileuploader"></div>
    </div><!-- #box-inside-div -->
</div><!-- #box -->
<div id="main">
     <h1>Upload a File Page</h1>

    <p>To upload a file, click the button below</p>
    <input type="button" id="myButt" value="Upload" />
</div>

CSS：

/*  #myOverlay on two lines for readability in this SO answer  */
#myOverlay {height:100%;width:100%;position:absolute;top:0px;left:0px;}
#myOverlay {background:black;opacity:0.5;z-index:10;display:none;}
#box {position:absolute;top:150px;left:125px;height:200px;width:550px;background:white;z-index:15;display:none;}
#box-inside-div{margin-left:20px;margin-top:30px;}

的jQuery / JavaScript的：

$(document).ready(function() {
    $('#myButt').click(function () {
        $('#myOverlay').show();
        $("#box").show();
        $("#fileuploader").uploadFile({
            url: "upload_recv.php",
            fileName: "myfile",
            onError: function(files,status,errMsg){
                /* onError because (1) jsFiddle cannot do ajax */
                /* AND (2) there is no upload_recv.php file! */
                $('#myOverlay').hide();
                $('#box').hide();
                alert('The file is now on the server');
            }
        });
    });//END mybutt.click
});

上传完成后，您将隐藏#myOverlay DIV和#box DIV（包含fileuploader DIV）。在jsFiddle示例中，为了确定上传何时完成，我使用了onError事件（因为jsFiddle不能执行ajax或后端PHP处理）。您可能会使用onSuccess或afterUploadAll事件。

有关如何操作的更多信息，请参阅HayAGeek页面上的演示。

最后。。。上传后如何处理服务器上的文件？

这是由您在上面的jQuery代码中指定的PHP处理器文件完成的。在上面的示例中，我们将其命名为 upload_recv.php

在HeyaGeek demo page上，请参阅右上方的Server Side。

模态窗口内的PHP文件上传

1 个答案: