PHP file upload inside modal window

问题

I have been searching the Internet for days with no luck. I need a modal window to upload a file and pass additional values to the script. The modal window needs to open when the user clicks on "This is Question #". Below is my current script. Any help or direction would be greatly appreciated.

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

回答1:

Try using Ravishanker Kusuma's jQuery File Upload Plugin, here:

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

To make the dialog modal, you just need to create a div like this:

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

and style it like this:

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

The overlay DIV is initially hidden (by appending display:none; to the end of the css above). When you want it visible, you remove the display:none;. When visible, it will overlay all the rest of the page, with the exception of your upload form which must have a higher z-index value.

Making a dialog modal really is that simple.

So, using Ravi's code, you just show a DIV like this:

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

When the upload is completed you would hide both the #myOverlay DIV and the #box DIV (which contains the fileuploader DIV). In the jsFiddle example, to determine when the upload has finished, I used the onError event (because jsFiddle cannot do either ajax or the back end PHP processing). You would probably use the onSuccess or afterUploadAll events.

For more information on how to do that, see the demos on the HayAGeek page.

And finally . . . how to process the file on the server once uploaded?

This is done by the PHP processor file you specified in the jQuery code above. In the above example, we named it upload_recv.php

On the HeyaGeek demo page, see Server Side at the top right.

来源：https://stackoverflow.com/questions/24005844/php-file-upload-inside-modal-window

标签

javascript