在模态窗口内上传PHP文件 - PHP file upload inside modal window

我已经在网上找了好几天了，还是没有找到。我需要一个模态窗口来上传文件，并通过附加值的脚本。当用户点击"这是问题#"时，需要打开模态窗口。下面是我当前的脚本。如有任何帮助或指导，我将不胜感激。

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

尝试使用Ravishanker Kusuma的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:

看到这个jsFiddle演示

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演示页面参见右上角的Server Side