PHP+jQuery+Ajax实现多图片上传效果


Posted in Javascript onMarch 14, 2015

今天我给大家分享的是在不刷新页面的前提下,使用PHP+jQuery+Ajax实现多图片上传的效果。用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并展示在页面上。

PHP+jQuery+Ajax实现多图片上传效果

HTML

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

<form id="imageform" method="post" enctype="multipart/form-data" action="upload.php"> 

    <div id="up_status" style="display:none"><img src="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 相关文章推荐
Add Formatted Data to a Spreadsheet
Jun 12 Javascript
JavaScript 学习笔记(十六) js事件
Feb 01 Javascript
JS判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 Javascript
vue quill editor 使用富文本添加上传音频功能
Jan 14 Javascript
详解JS深拷贝与浅拷贝
Aug 04 Javascript
原生JS实现分页
Apr 19 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 #Javascript
jQuery实现购物车数字加减效果
Mar 14 #Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 #Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 #Javascript
jQuery+jRange实现滑动选取数值范围特效
Mar 14 #Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 #Javascript
jQuery插件实现大图全屏图片相册
Mar 14 #Javascript
You might like
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
php之curl实现http与https请求的方法
2014/10/21 PHP
php网站被挂木马后的修复方法总结
2014/11/06 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
javascript数据类型详解
2017/02/07 Javascript
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
详解vue-cli3使用
2018/08/14 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
python练习程序批量修改文件名
2014/01/16 Python
Python中Threading用法详解
2017/12/27 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
前台接待的工作职责
2013/11/21 职场文书
技术总监管理岗位职责
2014/03/09 职场文书
集体生日活动方案
2014/08/18 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
假期安全教育广播稿
2014/10/04 职场文书