我们在本文中用到一个Ajax表单提交插件:jqery.form.js,有高人修改了几行代码并改名为:jquery.wallform.js,直接拿来用。
Ajax多图片上传效果界面
我们在页面上放置一个form表单,使用post提交到后台php处理程序upload.php,注意enctype属性设置要支持文件上传。#preview用来显示上传完毕后的图片。关于css样式设置本文不加说明,请参照下载包的源码。
代码如下 | 复制代码 |
最大100KB,支持jpg,gif,png格式。 |
当点击按钮“添加图片”后,弹出选择文件对话框,选择要上传的图片后,触发change事件。然后表单#imageform调用jquery.wallform.js的ajaxForm()方法,将表单数据提交给后台PHP处理,并根据返回结果处理页面元素的展示。如果上传成功,图片会一张张排列显示在页面上。关于ajaxForm()的使用可以参照本站文章:Ajax表单提交插件jqery form。
代码如下 | 复制代码 |
$(function(){ $('#photoimg').die('click').live('change', function(){ var status = $("#up_status"); var btn = $("#up_btn"); $("#imageform").ajaxForm({ target: '#preview', beforeSubmit:function(){ status.show(); btn.hide(); }, success:function(){ status.hide(); btn.show(); }, error:function(){ status.hide(); btn.show(); } }).submit(); }); }); |
代码如下 | 复制代码 |
$path = "uploads/"; $extArr = array("jpg", "png", "gif"); if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){ $name = $_FILES['photoimg']['name']; $size = $_FILES['photoimg']['size']; if(empty($name)){ echo '请选择要上传的图片'; exit; } $ext = extend($name); if(!in_array($ext,$extArr)){ echo '图片格式错误!'; exit; } if($size>(100*1024)){ echo '图片大小不能超过100KB'; exit; } $image_name = time().rand(100,999).".".$ext; $tmp = $_FILES['photoimg']['tmp_name']; if(move_uploaded_file($tmp, $path.$image_name)){ echo ''; }else{ echo '上传出错了!'; } exit; } //获取文件类型后缀 function extend($file_name){ $extend = pathinfo($file_name); $extend = strtolower($extend["extension"]); return $extend; } |