查看此链接。
代码是如何工作的？我的意思是 IFRAME 的 src 属性设置为 #那么upload.php如何知道表单已提交？
这是代码： index.php ：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Max's AJAX File Uploader</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
<!--
function startUpload(){
document.getElementById('f1_upload_process').style.visibility = 'visible';
document.getElementById('f1_upload_form').style.visibility = 'hidden';
return true;
}
function stopUpload(success){
var result = '';
if (success == 1){
result = '<span class="msg">The file was uploaded successfully!<'/span><br/><br/>';
}
else {
result = '<span class="emsg">There was an error during file upload!<'/span><br/><br/>';
}
document.getElementById('f1_upload_process').style.visibility = 'hidden';
document.getElementById('f1_upload_form').innerHTML = result + '<label>File: <input name="myfile" type="file" size="30" /><'/label><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /><'/label>';
document.getElementById('f1_upload_form').style.visibility = 'visible';
return true;
}
//-->
</script>
</head>
<body>
<div id="container">
<div id="header"><div id="header_left"></div>
<div id="header_main">Max's AJAX File Uploader</div><div id="header_right"></div></div>
<div id="content">
<form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
<p id="f1_upload_process">Loading...<br/><img src="loader.gif" /><br/></p>
<p id="f1_upload_form" align="center"><br/>
<label>File:
<input name="myfile" type="file" size="30" />
</label>
<label>
<input type="submit" name="submitBtn" class="sbtn" value="Upload" />
</label>
</p>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
</form>
</div>
<div id="footer"><a href="http://www.ajaxf1.com" target="_blank">Powered by AJAX F1</a></div>
</div>
</body>
</html>
upload.php ：
<?php
// Edit upload location here
$destination_path = getcwd().DIRECTORY_SEPARATOR;
$result = 0;
$target_path = $destination_path . basename( $_FILES['myfile']['name']);
if(@move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {
$result = 1;
}
sleep(1);
?>
<script language="javascript" type="text/javascript">window.top.window.stopUpload(<?php echo $result; ?>);</script>
如果您遵循 HTML 表单标记及其相关属性，则此代码中的流程非常简单。正在发生的事情是以下情况：
- 选择上传
- 提交表格
- onSubmit（） 触发了一个 JS 函数，该函数启用加载 .. 可视化并禁用上传表单。由于 * 返回 true*，表单仍会提交。
- 表单提交是在 iFrame 中完成的，因为"target="属性。通过该操作，您可以使iFrame源"上传.php"
- 上传.php从 iFrame 中调用。
- 上传.php结果调用主窗口JS函数"stopUpload"，该函数通知要执行的其余操作。
此脚本将起作用，尽管它的结果可能会跨浏览器更改。这是快速 AJAX 上传实现的好脚本。
您已将表单操作设置为上传.php <form action="upload.php"因此当您提交上传时.php知道表单已提交（如果我正确理解您的问题，那么上行是正确的）