一个最原始最简单的iframe上传例子：
本例中采用iframe名字，所以表单在提交时会在iframe内打开链接（即无刷新，确切的说应该是
感觉无刷新）
在表单提交时，调用startUpload方法，当然这是JS定义的。
前台上传页面index.html，主要是一个表单与一个js回调函数。上传文件时，form表单的method、 enctype属性必须和下面代码一样。然后将target的值设为iframe的name，这样就可以实现无刷新上传文件。
| 代码如下 | 复制代码 |
|
<title>上传文件</title> <script> function CallbackFunction(str){ alert("上传成功"); } </script> <form action="uploadfile.php" enctype="multipart/form-data" method="post" target="iframeUpload"> <iframe name="iframeUpload" src="" width="350" height="35" frameborder=0 SCROLLING="no" style="display:NONE"></iframe> <input id="test_file" name="test_file" type="file"> <input value="上传文件" type="submit"> </form> |
|
后台上传处理页面uploadfile.php，这段代码为简单的上传代码，没有进行错误及异常处理。上传代码执行完成后，要告诉父页面已经上传完毕了，因此，在这个页面里调用父页面的回调函数CallbackFunction，这个函数可以有参数，形式自己定义。
| 代码如下 | 复制代码 |
|
<?php set_time_limit(0); if($_SERVER['REQUEST_METHOD']=='POST') { move_uploaded_file($_FILES["test_file"]["tmp_name"], dirname($_SERVER['SCRIPT_FILENAME'])."/UploadTemp/" . $_FILES["test_file"]["name"]); echo "<script>window.parent.CallbackFunction();</script>"; } ?> |
|
以上是用iframe实现无刷新上传文件的简单方法，想要健壮的程序的话需要再细化
例2
PHP利用iframe上传文件并返回值到父框架
淡水其实也是采用这样的做发法的。正好看到有童鞋博客上有这样写。就顺手贴过来了。
| 代码如下 | 复制代码 |
|
if($result) { echo "上传成功!文件路径为：".$file2; echo '<input name="img" type="hidden" value="'.$file2.'" id="img"/>'; echo'<script>parent.document.form1.img.value=document.getElementById("img").value;</script>'; } |
|
文件上传成功后，把文件路径写入一个隐藏的域中（img），然后用DOM原理把隐藏域中的VALUE发送到父框架的表单form1的img文本框中：
ok，再来看看淡水的。
淡水编辑器用了tinyMCE，所以有一点点不一样。
我的form页：
| 代码如下 | 复制代码 |
|
<script src="tiny_mce/tiny_mce.js" type="text/javascript"></script> <script type="text/javascript"> // O2k7 skin tinyMCE.init({ // General options mode : "exact", elements : "content", theme : "advanced", skin : "o2k7", language : "zh", relative_urls : false, //....略过部分... }); function InsertHtml(type,path){ type=type.toLowerCase() switch(type){ |
|
iframe也就是在这个页面里了。
在我的iframe的提交给的php处理里：
| 代码如下 | 复制代码 |
|
$pasteJS = "<script type=text/javascript>n"; $pasteJS .= "parent.InsertHtml("" . $file_ext . "","" . $upload_src . "");n"; $pasteJS .= "</script>n"; echo $pasteJS; |
|
于是上传的文件就跑到tinyMCE的编辑框里了。upload的文件路径也通过userdata会暂存起来，直到写入database。路径保存这块儿，也是在iframe的提交给的php处理文件里的，这里淡水就不多写了。