当前位置:首页 > PHP教程 > php上传下载 > 列表

推荐:PHP+jQuery+Ajax多图片上传的实例

发布:smiling 来源: PHP粉丝网  添加日期:2015-04-09 13:36:41 浏览: 评论:0 

我们在本文中用到一个Ajax表单提交插件:jqery.form.js,有高人修改了几行代码并改名为:jquery.wallform.js,直接拿来用.

我们在页面上放置一个form表单,使用post提交到后台php处理程序upload.php,注意enctype属性设置要支持文件上传,#preview用来显示上传完毕后的图片,关于css样式设置本文不加说明,请参照下载包的源码,代码如下:

  1. <form id="imageform" method="post" enctype="multipart/form-data" action="upload.php">  
  2.     <div id="up_status" style="display:none"><img src="loader.gif" alt="uploading"/></div>  
  3.     <div id="up_btn" class="btn">  
  4.         <span>添加图片</span>  
  5.         <input id="photoimg" type="file" name="photoimg">  
  6.     </div>  
  7. </form>  
  8. <p>最大100KB,支持jpg,gif,png格式。</p>
  9. <div id="preview"></div>  

jQuery:本实例基于jQuery,因此必须在页面中载入jquery库以及jquery.wallform.js.

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="jquery.wallform.js"></script>

当点击按钮“添加图片”后,弹出选择文件对话框,选择要上传的图片后,触发change事件,然后表单#imageform调用jquery.wallform.js的ajaxForm()方法,将表单数据提交给后台PHP处理,并根据返回结果处理页面元素的展示,如果上传成功,图片会一张张排列显示在页面上,代码如下:

  1. $(function(){  
  2.     $('#photoimg').die('click').live('change'function(){  
  3.         var status = $("#up_status");  
  4.         var btn = $("#up_btn");  
  5.         $("#imageform").ajaxForm({  
  6.             target: '#preview',   
  7.             beforeSubmit:function(){  
  8.                 status.show();  
  9.                 btn.hide();  
  10.             },   
  11.             success:function(){  
  12.                 status.hide();  
  13.                 btn.show();  
  14.             },   
  15.             error:function(){  
  16.                 status.hide();  
  17.                 btn.show();  
  18.         } }).submit();  
  19.     });  
  20. });  

PHP:upload.php处理图片上传,并将上传好的图片保存在uploads/目录,注意该目录要有写权限,首先需要检测是否为POST方式提交,然后判断图片格式、图片大小是否符合要求,然后使用move_uploaded_file()上传图片,并将图片重命名,格式为:time().rand(100,999),代码如下:

  1. $path = "uploads/";  
  2.  
  3. $extArr = array("jpg""png""gif");  
  4.  
  5. if(isset($_POSTand $_SERVER['REQUEST_METHOD'] == "POST"){  
  6.     $name = $_FILES['photoimg']['name'];  
  7.     $size = $_FILES['photoimg']['size'];  
  8.       
  9.     if(emptyempty($name)){  
  10.         echo '请选择要上传的图片';  
  11.         exit;  
  12.     }  
  13.     $ext = extend($name);  
  14.     if(!in_array($ext,$extArr)){  
  15.         echo '图片格式错误!';  
  16.         exit;  
  17.     }  
  18.     if($size>(100*1024)){  
  19.         echo '图片大小不能超过100KB';  
  20.         exit;  //开源软件:phpfensi.com 
  21.     }  
  22.     $image_name = time().rand(100,999).".".$ext;  
  23.     $tmp = $_FILES['photoimg']['tmp_name'];  
  24.     if(move_uploaded_file($tmp$path.$image_name)){  
  25.         echo '<img src="'.$path.$image_name.'"  class="preview">';  
  26.     }else{  
  27.         echo '上传出错了!';  
  28.     }  
  29.     exit;  
  30. }  
  31.  
  32. //获取文件类型后缀  
  33. function extend($file_name){  
  34.     $extend = pathinfo($file_name);  
  35.     $extend = strtolower($extend["extension"]);  
  36.     return $extend;  

当然,实际应用中,可以与数据库以及用户中心结合,将用户上传的图片保存在数据表中,具体应用大家可以自行研究.

Tags: PHP+jQuery Ajax多图片上传

分享到: