首页 > 代码库 > 在 PHP 中结合 Ajax 技术进行图片上传

在 PHP 中结合 Ajax 技术进行图片上传

前面几则日志中讲述了在 PHP 中上传文件,相信大家对 PHP 中如何进行文件上传已经初步掌握。本文来继续探讨在 PHP 中上传文件的技术,不同的是,本次上传将仅限于图片文件的上传,并且将采用 Ajax 技术。

        本例将要实现这样的效果:当用户选择图片,开始上传后,后台上传完成时,随即会显示到当前页面。由于,从开始上传到上传完成,再到图片显示均在一个页面上 完成(从表面上看)。所以使用 Ajax 技术是必须的。但如何使用这些操作在一个页面上来完成呢?考虑到这样的情况,当文件开始上传后,便开始打开 <form> 标签中 action 属性所指向的网页 (PHP 页),这样岂不起离开了原来的页面了么?幸好,有办法解决这个问题,这里我们使用 <iframe> 标签,并将 <form> 标签的 target 设置为该 <iframe>。

        来梳理一下思路:在 HTM 页中添加 <form> 和 <iframe>,设置 <form> 的 target 属性为这个 <iframe>;当文件上传开始后,就直接在当前页面的这个 <iframe> 中进行上传。而这个上传操作完成后,PHP 页又后通过 Javascript 来调用 Ajax 中的 XMLHttpRequest 对象,来完成最后的图片显示工作。这样看来,我们的目的就达到了。这里再补充一点,由于并不想让用户看到多余的东西在页面中,所以应该把 <iframe> 隐藏。

        本实例一共包括三个文件和一个供上传图片用的文件夹。三个文件分别是:
                uppic.htm 显示上传表单,用户的操作以及图片的显示都在这个页面中;
                uppic.php 处理上传的 PHP 程序;
                showpic.php 负责显示图片的 PHP 程序。

        来看 uppic.htm 中的内容:
<html>
<head>
   <script type="text/javascript">
    function uploadimg(theform){ 
     //提交当前表单    
     theform.submit();
    }
   
    function runajax(objId,serverPage){
     //创建 XMLHttpRequest 对象         
     var xmlhttp=false;
     if(window.XMLHttpRequest){
      xmlhttp=new XMLHttpRequest();
     }
     else{
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
    
     xmlhttp.open("GET",serverPage);    
     xmlhttp.onreadystatechange=function(){     
      if(xmlhttp.readyState==4 && xmlhttp.status==200){     
       document.getElementById(objId).innerHTML=xmlhttp.responseText;
      }
     }
     xmlhttp.send(null);
    }
   </script>
</head>
<body>
   <div id="showpic">
   </div>
   <div id="myform">
    <form action="uppic.php" method="post" enctype="multipart/form-data" target="upframe" onsubmit="uploadimg(this); return false;">
     请选择一个图片上传:<input type="file" name="mypic" id="mypic" /><br />
     <br />
     <input type="submit" name="submit" value="http://www.mamicode.com/上传" />
    </form>
   </div>
   <iframe id="upframe" name="upframe" src="http://www.mamicode.com/uppic.php" style="display:none;">
   </iframe>
</body>
</html>

        其中的 JS 代码很简单,像所有的 Ajax 程序一样,无任何特别之处。在 <body> 中,主要包括三个部分:名为 showpic 的 <div>(图片上传完成后,用来显示图片)、<form> 和隐藏的 <iframe>(其 display 属性为 none)。并且在 <form> 中其 target 属性是 <iframe> 标签的名称。

        来看 uppic.php 的代码:
<?php
//允许上传文件的 MIME 类型 
$allow_types=array(
   "image/jpeg",
   "image/pjpeg",
   "image/gif",
   "image/png"
);
$up_folder="ups"; // 图片保存的文件夹 

if(isset($_FILES[‘mypic‘])){
   //检测是否是图片文件 
   if(in_array($_FILES[‘mypic‘][‘type‘],$allow_types)){
    if($_FILES[‘mypic‘][‘error‘]==0){
     $srcfile=$_FILES[‘mypic‘][‘tmp_name‘];
     $destfile=$up_folder."/".$_FILES[‘mypic‘][‘name‘];
     if(!move_uploaded_file($srcfile,$destfile)){
      echo "上传图片时发生错误";    
     }
     else{
      //没有发生错误 
     ?>
      <body onl oad="finishupload(parent,‘<?php echo $destfile; ?>‘);">
       <img src="http://www.mamicode.com/<?php echo " />
       <script type="text/javascript">
        function finishupload(theframe,thefile){
         var file="showpic.php?img=" + thefile;        
         if(theframe.runajax){
          theframe.runajax("showpic",file);
         }
         else{
          alert("Error");
         }
        
        }
       </script>
      </body>
     <?php
     }
    }
   }
}
else{
   echo "Error";
}
?>

        在没有发生错误的情况下,将来载入 Body,并执行 finishupload 函数。在这个函数中,程序所传的值分别是 parent 和目标文件名(图片上传到服务器上的文件名,包括其相对路径)。需要说明的是,由于这个页面是在 <iframe> 中呈现的,所以这里的 parent 就是指包含这个 <iframe> 的父级容器,也就是 uppic.htm 的窗口。由于在 uppic.htm 页面中定义了名为 runajax 的 Javascript 函数,所以通过调用 parent.runajax 就是调用它。而 runajax 中的一个参数说明了请求的页面:showpic.php。

        来看 showpic.php 的代码:
<?php
if(isset($_GET[‘img‘])){
   $file=$_GET[‘img‘];
  
   if(!is_file($file) || !file_exists($file)){   
    echo "Error";
    exit;
   }
   else{
   ?>   
    <img src="http://www.mamicode.com/<?php echo $file; ?>" />
   <?php
   }
}
?>


        由于该页面仅负责显示图片,所以代码不多,要显示的图片是通过传递过来的类型为 GET 的 img 参数(在 Ajax 请求中附在 showpic.php 后面的 URL 参数)。程序道先对这个文件进行检查,如果不出错,就将图片显示出来,当图片显示出来之后,自然就作是 Ajax 的响应结果显示到 uppic.htm 中指定的位置了。