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;
}

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

以上就是本文给大家分享的全部内容了,希望大家能够喜欢。

(0)

相关推荐

  • PHP实现图片上传并压缩

    本文实例讲解了PHP图片上传并压缩的实现方法,分享给大家供大家参考,具体内容如下 使用到三个文件 connect.php:连接数据库 test_upload.php:执行SQL语句 upload_img.php:上传图片并压缩 三个文件代码如下: 连接数据库:connect.php <?php $db_host = ''; $db_user = ''; $db_psw = ''; $db_name = ''; $db_port = ''; $sqlconn=new mysqli($db_host

  • PHP图片上传类带图片显示

    这是一个PHP的文件上传类带图片显示的.其实做成函数就可以了.不过还是做成类好玩一点.~~~~ 本来应该用JS来验证上传文件类型的.但懒得做了. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3

  • 两种php实现图片上传的方法

    图片上传在项目中经常用到,几乎没有任何一个项目可以脱离图片或者是文件上传.本篇我在这向大家介绍两种常规的上传方式.(注:在这里我们仅仅是对功能的实现,不去做过多的前端的样式) 一.利用form表单上传 此种方式是最原始的上传方式,前端就是简单的form表单,后端我们有PHP处理传输过来的文件. 首先看前端的代码 upload.html <form action="handle.php" name="form" method="post" e

  • php+ajax+h5实现图片上传功能

    本文实例为大家分享了php实现ajax图片上传的具体代码,供大家参考,具体内容如下 html页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="__PUBLIC__

  • 使用ThinkPHP+Uploadify实现图片上传功能

    首先,将下载的Uploadify压缩包解压放到公共文件夹内.实现代码如下: 前台html部分: <script src="/uploadify/jquery.min.js" data-ke-src="/Public/uploadify/jquery.min.js" type="text/javascript"> <script src="/uploadify/jquery.uploadify.min.js"

  • thinkphp实现图片上传功能分享

    1.我们首先需要创建一个表 复制代码 代码如下: CREATE TABLE IF NOT EXISTS `tp_image` (  `id` int(11) NOT NULL AUTO_INCREMENT,  `image` varchar(200) NOT NULL,  `create_time` int(11) NOT NULL,  PRIMARY KEY (`id`)) ENGINE=MyISAM  DEFAULT CHARSET=utf8; 2.然后再conf文件里添加配置(最后一段配置

  • PHP 图片上传代码

    (代码片断试验成功,成功上传!) 因为昨天想起来学习一下PHP代码的冲动,是来源于像模仿着做一个类似公司IMAGE LIBRARY的东西出来.所以,今天当最基本的功能实现后,对PHP有了个概念性的认识后,就很自然地想到了个重要的功能急待实现,那就是图片的上传. 于是,开始在网上搜罗,找到个别人博客里的由三个页面组成的代码片断,于是拷下来研究,结果始终调试不成.本以为是公司电脑入域问题在作怪,后来经过一番尝试后,打算暂时放一下.回家去试(因为家里的电脑是最纯净的环境配制). 到家后,将代码拷出来尝

  • 简单的PHP图片上传程序

    第一种: php部分 复制代码 代码如下: <?php  if($_FILES['file']['error'] > 0){     echo '!problem:';     switch($_FILES['file']['error'])     {       case 1: echo '文件大小超过服务器限制';               break;       case 2: echo '文件太大!';               break;       case 3: ech

  • php多个文件及图片上传实例详解

    本文实例讲述了php多个文件及图片上传的方法.分享给大家供大家参考.具体实现方法如下: 多个文件上传是在单文件上传的基础上利用遍历数组的方式进行遍历表单数组然后把文件一个个上传到服务器上了,下面就来看一个简单多个文件上传实例 多个文件上传和单独文件上传的处理方式是一样的,只需要在客户端多提供几个类型为"file"的输入表单,并指定不同的"name"属性值.例如,在下面的代码中,可以让用户同时选择三个本地文件一起上传给服务器,客户端的表单如下所示: 复制代码 代码如下

  • php 图片上传类代码

    先来个简单的: 复制代码 代码如下: <? //http://www.jb51.net class upLoad{ public $length; //限定文件大小 public $file; //判断此类是用于图片上传还是文件上传 public $fileName; //文件名 public $fileTemp; //上传临时文件 public $fileSize; //上传文件大小 public $error; //上传文件是否有错,php4没有 public $fileType; //上传

随机推荐