jQuery+php实现ajax文件即时上传的详解


Posted in PHP onJune 17, 2013

很多项目中需要用到即时上传功能,比如,选择本地图片后,立即上传并显示图像。本文结合实例讲解如何使用jQuery和PHP实现Ajax即时上传文件的功能,用户只需选择本地图片确定后即实现上传,并显示上传进度条,上传完成后,显示图片信息。

jQuery+php实现ajax文件即时上传的详解

jQuery+php实现ajax文件即时上传的详解jQuery+php实现ajax文件即时上传的详解

HTML
本示例基于jQuery以及相当出色的jquery.form插件,所以,先要载入jquery库和form插件。
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
接着在页面中加入如下代码:

<div class="btn"> 
     <span>添加附件</span> 
     <input id="fileupload" type="file" name="mypic"> 
</div> 
<div class="progress"> 
    <span class="bar"></span><span class="percent">0%</span > 
</div> 
<div class="files"></div> 
<div id="showimg"></div>

我们在html中放置一个添加附件的按钮元素.btn,以及进度条.progress,用于显示文件信息的.files和显示图片的#showimg
可以看出,我们用于上传文件的html中并没有出现form表单,而正常的上传功能是要依赖form表单的。我们的form表单是动态插入的,这样可以避免一个大表单中出现多个form。

CSS
我们使用css可以将传统的浏览文件的表单控件美化成一个按钮,这样看起来是不是很酷。

jQuery+php实现ajax文件即时上传的详解

.btn{position: relative;overflow: hidden;margin-right: 4px;display:inline-block; 
*display:inline;padding:4px 10px 4px;font-size:14px;line-height:18px; 
*line-height:20px;color:#fff; 
text-align:center;vertical-align:middle;cursor:pointer;background:#5bb75b; 
border:1px solid #cccccc;border-color:#e6e6e6 #e6e6e6 #bfbfbf; 
border-bottom-color:#b3b3b3;-webkit-border-radius:4px; 
-moz-border-radius:4px;border-radius:4px;} 
.btn input{position: absolute;top: 0; right: 0;margin: 0;border:solid transparent; 
opacity: 0;filter:alpha(opacity=0); cursor: pointer;} 
.progress{position:relative; margin-left:100px; margin-top:-24px;  
width:200px;padding: 1px; border-radius:3px; display:none} 
.bar {background-color: green; display:block; width:0%; height:20px;  
border-radius:3px; } 
.percent{position:absolute; height:20px; display:inline-block;  
top:3px; left:2%; color:#fff } 
.files{height:22px; line-height:22px; margin:10px 0} 
.delimg{margin-left:20px; color:#090; cursor:pointer}

jQuery
首先定义各种变量,注意动态将表单元素form插入到上传按钮部位,并且form的属性enctype必须设置为:multipart/form- data。然后当点击“上传附件”按钮,选择要上传的文件后,调用jquery.form插件的ajaxSubmit方法,如下代码说明。
$(function () { 
    var bar = $('.bar'); 
    var percent = $('.percent'); 
    var showimg = $('#showimg'); 
    var progress = $(".progress"); 
    var files = $(".files"); 
    var btn = $(".btn span"); 
    $("#fileupload").wrap("<form id='myupload' action='action.php'  
    method='post' enctype='multipart/form-data'></form>"); 
    $("#fileupload").change(function(){ //选择文件 
        $("#myupload").ajaxSubmit({ 
            dataType:  'json', //数据格式为json 
            beforeSend: function() { //开始上传 
                showimg.empty(); //清空显示的图片 
                progress.show(); //显示进度条 
                var percentVal = '0%'; //开始进度为0% 
                bar.width(percentVal); //进度条的宽度 
                percent.html(percentVal); //显示进度为0% 
                btn.html("上传中..."); //上传按钮显示上传中 
            }, 
            uploadProgress: function(event, position, total, percentComplete) { 
                var percentVal = percentComplete + '%'; //获得进度 
                bar.width(percentVal); //上传进度条宽度变宽 
                percent.html(percentVal); //显示上传进度百分比 
            }, 
            success: function(data) { //成功 
                //获得后台返回的json数据,显示文件名,大小,以及删除按钮 
                files.html("<b>"+data.name+"("+data.size+"k)</b>  
                <span class='delimg' rel='"+data.pic+"'>删除</span>"); 
                //显示上传后的图片 
                var img = "http://demo.helloweba.com/upload/files/"+data.pic; 
                showimg.html("<img src='"+img+"'>"); 
                btn.html("添加附件"); //上传按钮还原 
            }, 
            error:function(xhr){ //上传失败 
                btn.html("上传失败"); 
                bar.width('0'); 
                files.html(xhr.responseText); //返回失败信息 
            } 
        }); 
    }); 
    ... 
});

关于jquery.form插件的更多信息,请参阅form插件官网:http://malsup.com/jquery/form/,官网中详细介绍了form插件的API和各种选项设置以及示例。
接下来,文件上传完成,如果用户想删除上传的文件,可以写个ajax post请求来完成删除操作。
$(function () { 
    ...接上面的代码 
    $(".delimg").live('click',function(){ 
        var pic = $(this).attr("rel"); 
        $.post("action.php?act=delimg",{imagename:pic},function(msg){ 
            if(msg==1){ 
                files.html("删除成功."); 
                showimg.empty(); //清空图片 
                progress.hide(); //隐藏进度条 
            }else{ 
                alert(msg); 
            } 
        }); 
    }); 
});

PHP
action.php中需要处理图片上传以及删除图片。图片上传时需要验证格式和大小,然后通过move_uploaded_file()方法上传图片,最后返回json格式的数据。删除图片时使用unlink()即可完成删除操作。
$action = $_GET['act']; 
if($action=='delimg'){ //删除图片 
    $filename = $_POST['imagename']; 
    if(!empty($filename)){ 
        unlink('files/'.$filename); 
        echo '1'; 
    }else{ 
        echo '删除失败.'; 
    } 
}else{ //上传图片 
    $picname = $_FILES['mypic']['name']; 
    $picsize = $_FILES['mypic']['size']; 
    if ($picname != "") { 
        if ($picsize > 512000) { //限制上传大小 
            echo '图片大小不能超过500k'; 
            exit; 
        } 
        $type = strstr($picname, '.'); //限制上传格式 
        if ($type != ".gif" && $type != ".jpg") { 
            echo '图片格式不对!'; 
            exit; 
        } 
        $rand = rand(100, 999); 
        $pics = date("YmdHis") . $rand . $type; //命名图片名称 
        //上传路径 
        $pic_path = "files/". $pics; 
        move_uploaded_file($_FILES['mypic']['tmp_name'], $pic_path); 
    } 
    $size = round($picsize/1024,2); //转换成kb 
    $arr = array( 
        'name'=>$picname, 
        'pic'=>$pics, 
        'size'=>$size 
    ); 
    echo json_encode($arr); //输出json数据 
}

本文借助了jquery form插件来完成单文件上传功能,其实目前很很多款优秀的上传插件可以使用,有基于flash的,有基于jquery的,典型的有:jQuery File Upload。该插件支持多文件上传,支持拖拽上传等,有兴趣的同学可以先了解下。
PHP 相关文章推荐
PHP 动态随机生成验证码类代码
Apr 09 PHP
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
Mar 01 PHP
php实现利用phpexcel导出数据
Aug 24 PHP
php实现发送微信模板消息的方法
Mar 07 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
Jul 15 PHP
php上传图片获取路径及给表单字段赋值的方法
Jan 23 PHP
php实现按天数、星期、月份查询的搜索框
May 02 PHP
php实现博客,论坛图片防盗链的方法
Oct 15 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
Nov 21 PHP
创建无限极分类树型结构的简单方法
Jun 20 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
May 28 PHP
PHP+ajax实现二级联动菜单功能示例
Aug 10 PHP
深入Apache与Nginx的优缺点比较详解
Jun 17 #PHP
php之CodeIgniter学习笔记
Jun 17 #PHP
apache配置虚拟主机的方法详解
Jun 17 #PHP
php unset全局变量运用问题的深入解析
Jun 17 #PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
Jun 17 #PHP
thinkphp中连接oracle时封装方法无法用的解决办法
Jun 17 #PHP
PHP 使用header函数设置HTTP头的示例解析 表头
Jun 17 #PHP
You might like
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
Python文件操作基本流程代码实例
2017/12/11 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
python爬取微信公众号文章的方法
2019/02/26 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
通过 Django Pagination 实现简单分页功能
2019/11/11 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
JSF的标签库有哪些
2012/04/27 面试题
《争吵》教学反思
2014/02/15 职场文书
《赵州桥》教学反思
2014/02/17 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
质量整改通知单
2015/04/21 职场文书
党员反邪教心得体会
2016/01/15 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
mysql 获取时间方式
2022/03/20 MySQL