利用iframe实现表单无刷新上传

最新推荐文章于 2025-08-16 06:13:53 发布

转载最新推荐文章于 2025-08-16 06:13:53 发布 · 328 阅读

文章标签：

#iframe #file #callback #input #path #html

php学习专栏收录该内容

73 篇文章

订阅专栏

本文介绍了一种利用Ajax技术实现在网页中进行文件无刷新上传的方法。通过将上传表单的目标设置为隐藏的iframe，并使用JavaScript监听iframe的内容来更新页面显示，实现了文件上传过程中的用户体验提升。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <script type="text/javascript">   
    function callback(msg)   
    {   
        document.getElementById('msg').innerHTML = msg;
    }   
    </script>  
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax无刷新表单提交 </title>
</head>
<body>
   <form action="get.php" id="form1" name="form1" encType="multipart/form-data"  method="post" target="hidden_frame" >   
        <input type="file" id="file" name="file" style="width:450">   
        <INPUT type="submit" value="上传"><span id="msg"></span> 
        <div id="msg"></div>  
        <br>   
        <font color="red">只能上传JPG,JPEG,GIF,BMP,SWF,RMVB,RM格式文件</font>                 
        <iframe style="display:none;"name='hidden_frame' id="hidden_frame" ></iframe>   
</form> 
</body>
</html>


test.php
<?php
$time = time ();
$path = 'uploads/' . $time . '.jpg';
$msg = 'good';
if (is_uploaded_file ( $_FILES ['file'] ['tmp_name'] )) {
if (move_uploaded_file ( $_FILES ['file'] ['tmp_name'], $path )) {
echo ("<script type=\"text/javascript\">window.parent.callback('上传成功! ');</script>");
}
}
?>