我已经在互联网上搜索了好几天了，但没有运气。我需要一个模式窗口来上传文件并将附加值传递给脚本。当用户单击“这是问题#”时，需要打开模式窗口。以下是我当前的脚本。任何帮助或指导将不胜感激。
<!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 文件上传插件，此处:
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:
<小时/>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 ，请参阅右上角的服务器端。
关于javascript - PHP文件在模态窗口内上传，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24005844/