网站建设资讯

NEWS

网站建设资讯

PHP+jQuery+Ajax实现多图片上传-创新互联

这篇文章主要介绍“PHP+jQuery+Ajax实现多图片上传”,在日常操作中,相信很多人在PHP+jQuery+Ajax实现多图片上传问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”PHP+jQuery+Ajax实现多图片上传”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

牙克石ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联建站的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:028-86922220(备注:SSL证书合作)期待与您的合作!

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

HTML

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

当点击按钮“添加图片”后,弹出选择文件对话框,选择要上传的图片后,触发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;}

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

到此,关于“PHP+jQuery+Ajax实现多图片上传”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


名称栏目:PHP+jQuery+Ajax实现多图片上传-创新互联
分享URL:http://njwzjz.com/article/cchgjj.html