Javascript 在模态窗口内上载PHP文件
我已经在互联网上搜索了好几天，但运气不好。我需要一个模式窗口来上传文件并向脚本传递附加值。当用户单击“这是问题”时，需要打开模式窗口。下面是我当前的脚本。任何帮助或指导都将不胜感激Javascript 在模态窗口内上载PHP文件,javascript,php,jquery,upload,modal-dialog,Javascript,Php,Jquery,Upload,Modal Dialog,我已经在互联网上搜索了好几天，但运气不好。我需要一个模式窗口来上传文件并向脚本传递附加值。当用户单击“这是问题”时，需要打开模式窗口。下面是我当前的脚本。任何帮助或指导都将不胜感激 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style> ul { li
<!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>
无标题文件
保险商实验室{
列表样式：无；
保证金：0；
填充：0；
}
李{
/*背景图片：url（/images/page.png）*/
背景位置：0 1px；
背景重复：无重复；
左侧填充：20px；
}
a{
颜色：#000000；
光标：指针；
文字装饰：无；
}
a:悬停{
文字装饰：下划线；
}
.隐藏{
显示：无；
}
函数addLine（什么）{
$（“#”+what）.append（“上传文档的URL ”）；
};
函数myToggle（什么）{
$（“#”+what）.toggleClass（'hidden'）；
};
-
-
-
-
-
jQuery文件上传插件<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;}
display:none；显示：无。可见时，它将覆盖页面的所有其余部分，但上载表单除外，该表单必须具有更高的z索引值
制作一个对话模式就这么简单
因此，使用Ravi的代码，您只需显示一个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;}
HTML:
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\u recv.php
在上，请参见右上角的服务器端onetwoonetwoz-index