iframe无刷新文件上传实现程序

2024-09-04 11:44:44

字体：大中小

来源：转载

供稿：网友

iframe无刷新文件上传其实就是在当前页面打开了上传程序的页面,有点像ajax局部刷新一个,只是我们把它放到了iframe页面中上传,同时我们把iframe页面给隐藏了。

一个最原始最简单的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实现无刷新上传文件的简单方法,想要健壮的程序的话需要再细化.

PHP无刷新实例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){

            case '.gif':

            thecode = '<img src="'+path+'" alt=""/>';

            break;

            case '.jpg':

            thecode = '<img src="'+path+'" alt=""/>';

            break;

//......略过部分......

            default :

            thecode = '<a href="'+path+'" target="_blank">Download</a>';

            break;

        }

        tinyMCE.execCommand('mceInsertContent',true,thecode);

    }

</script>

iframe也就是在这个页面里了,在我的iframe的提交给的php处理里,代码如下:

$pasteJS = "<script type=text/javascript>n";

$pasteJS .= "parent.InsertHtml("" . $file_ext . "","" . $upload_src . "");n";

$pasteJS .= "</script>n";

echo $pasteJS;