在模态窗口内上传PHP文件答案

【问题标题】：PHP file upload inside modal window在模态窗口内上传PHP文件
【发布时间】：2014-07-23 05:43:32
【问题描述】：

我已经在互联网上搜索了几天，但没有运气。我需要一个模式窗口来上传文件并将附加值传递给脚本。当用户单击“这是问题#”时，模式窗口需要打开。以下是我当前的脚本。任何帮助或指导将不胜感激。

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

【问题讨论】：

到底是什么问题，是模态窗口还是文件上传？无论哪种方式，它似乎都很广泛，因为还没有任何一种。
对不起，关于那个。问题是创建一个模式窗口来上传文件。

标签： javascript php jquery upload modal-dialog

【解决方案1】：

在这里尝试使用 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：

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。

【讨论】：

感谢您的帮助。在您的帮助下，我相信我对模态窗口有了基本的了解。我现在唯一的问题是你的例子。所有的
水平对齐，而不是彼此重叠。有什么我想念的吗？
我没有测试我的代码，只是把它作为例子，但如果 DIV 没有正确对齐，它可能是 css。这是一个复习：在正常的 HTML 流中，<div>one</div><div>two</div> 将垂直对齐。 <div>one<div>two</div></div> 应该堆叠在一起（3D）。使用 CSS，您可以从流中删除任何 div 并将其放置在您想要的任何位置。示例：<div>one</div><div style="position:absolute;top:0px;left:0px">two</div> 会将 div2 放在 div1 的顶部（3D 堆叠）。最后，还有 css z-index，它决定了哪个 div 在顶部（3D 堆叠）。 HTH
Here is a jsFiddle example 这个问题。请注意，创建了其他 DIV 是为了正确定位和设置文件上传器 div 的样式。还使用了 CSS 绝对定位和 z-index。当在屏幕上定位元素有困难时，尝试将困难的元素放在另一个 DIV 中并设置样式。所有元素都应该在 div 中。另请注意对#myOverlay css 的更改。（jsFiddle 示例也为未来的读者添加到问题本身）。