PHP+jQuery+Ajax实现多图片上传介绍
本文中用到一个Ajax表单提交插件:jqery.form.js,有高人修改了几行代码并改名为:jquery.wallform.js,直接拿来用。
下面就来就来介绍一下这一款功能强大的插件的使用,需要的朋友可以做一下参考.
在不刷新页面的前提下,使用PHP+jQuery+Ajax实现多图片上传的效果。用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并展示在页面上,效果图:
<form%20id="imageform"%20method="post"%20enctype="multipart/form-data"%20action="upload.php">
%20%20<div%20id="up_status"%20style="display:none"><img%20src="loader.gif" alt="uploading"/></div>
<div id="up_btn" class="btn"> <span>添加图片</span>
<input id="photoimg" type="file" name="photoimg">
</div>
</form>
<p>最大100KB,支持jpg,gif,png格式。</p>
<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处理,并根据返回结果处理页面元素的展示。如果上传成功,图片会一张张排列显示在页面上。关于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 '<img src="'.$path.$image_name.'" class="preview">';
}
else{
echo '上传出错了!';
}
exit;
}
//获取文件类型后缀
function extend($file_name){
$extend = pathinfo($file_name);
$extend = strtolower($extend["extension"]);
return $extend;
}
相关推荐
-
javascript矩形碰撞检测代码
本章节分享一段矩形碰撞检测代码,如下:/** * 矩形区域碰撞检测 * Crtd by dministrtor on 14-4-7. * r: mrkr */function
-
js获取指定单元格的内容代码实例实例
本章节分享一段代码实例,它实现了获取bl单元格内容的功能。代码实例如下
-
javascript动态修改单元格内容代码实例
在实际应用中,可能根据需要动态改变td单元格的内容,下面就通过代码实例介绍一下如何实现此功能。代码如下:-8
-
javascript通用获取元素样式属性值代码实例
本章节分享一段代码实例,它实现了具有通用效果的获取元素指定样式属性值的功能。无论是使用l.styl.ttr方式定义的属性还是样式表定义的属性,都可以获取。代码实例如下: ht
-
javascript获取鼠标指针在整个页面中的坐标位置
本章节分享一段代码实例,它实现了能够获取鼠标坐标在整个页面中的坐标。这个坐标也包括滚动条部分的尺寸,代码实例如下:u