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 相关文章推荐
dedecms中常见问题修改方法总结
Mar 21 PHP
解决文件名解压后乱码的问题 将文件名进行转码的代码
Jan 10 PHP
php在window iis的莫名问题的测试方法
May 14 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
Jun 13 PHP
解析php下载远程图片函数 可伪造来路
Jun 25 PHP
PHP 二维数组根据某个字段排序的具体实现
Jun 03 PHP
php实现过滤表单提交中html标签的方法
Oct 17 PHP
javascript some()函数用法详解
Nov 13 PHP
PHP count()函数讲解
Feb 03 PHP
Laravel如何自定义command命令浅析
Mar 23 PHP
PHP命名空间定义与用法实例分析
Aug 14 PHP
PHP7生产环境队列Beanstalkd用法详解
May 19 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
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
理解Javascript_13_执行模型详解
2010/10/20 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
Bootstrap table使用方法总结
2017/05/10 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
Python实现配置文件备份的方法
2015/07/30 Python
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
Django如何实现上传图片功能
2019/08/16 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
pycharm的python_stubs问题
2020/04/08 Python
python 如何设置守护进程
2020/10/29 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
巴西最好的男鞋:Rafarillo
2018/05/25 全球购物
六道php面试题附答案
2014/06/05 面试题
医学检验专业大学生求职信
2013/11/18 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
大班开学家长寄语
2014/04/04 职场文书
小学老师寄语大全
2014/04/04 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
中秋节活动总结
2014/08/29 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
学困生转化工作总结
2015/08/13 职场文书
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL