我们在本文中用到一个ajax表单提交插件:jqery.form.js,有高人修改了几行代码并改名为:jquery.wallform.js,直接拿来用。
ajax多图片上传效果界面
我们在页面上放置一个form表单,使用post提交到后台php处理程序upload.php,注意enctype属性设置要支持文件上传。#preview用来显示上传完毕后的图片。关于css样式设置本文不加说明,请参照下载包的源码。
代码如下 复制代码
添加图片
最大100kb,支持jpg,gif,png格式。
jquery
本实例基于jquery,因此必须在页面中载入jquery库以及jquery.wallform.js。
当点击按钮“添加图片”后,弹出选择文件对话框,选择要上传的图片后,触发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();
});
});
php
upload.php处理图片上传,并将上传好的图片保存在uploads/目录,注意该目录要有写权限。首先需要检测是否为post方式提交,然后判断图片格式、图片大小是否符合要求,然后使用move_uploaded_file()上传图片,并将图片重命名,格式为:time().rand(100,999)。
代码如下 复制代码
$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;
}
当然,实际应用中,可以与数据库以及用户中心结合,将用户上传的图片保存在数据表中,具体应用大家可以自行研究。