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与已存在的Java应用程序集成
Oct 09 PHP
PHP mkdir()定义和用法
Jan 14 PHP
用mysql内存表来代替php session的类
Feb 01 PHP
破解图片防盗链的代码(asp/php)测试通过
Jul 02 PHP
PHP对字符串的递增运算分析
Aug 08 PHP
php高级编程-函数-郑阿奇
Jul 04 PHP
PHP数据集构建JSON格式及新数组的方法
Nov 07 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
Nov 13 PHP
ThinkPHP中的关联模型注意点
Jun 16 PHP
对PHP PDO的一些认识小结
Jan 23 PHP
php列出mysql表所有行和列的方法
Mar 13 PHP
Yii数据库缓存实例分析
Mar 29 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 fckeditor 调用的函数
2009/06/21 PHP
php模板中出现空行解决方法
2011/03/08 PHP
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
php实现的mongodb操作类实例
2015/04/03 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
javascript indexOf函数使用说明
2008/07/03 Javascript
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
Python的装饰器模式与面向切面编程详解
2015/06/21 Python
详解Python用户登录接口的方法
2019/04/17 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
amazeui页面分析之登录页面的示例代码
2020/08/25 HTML / CSS
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
初中女生自我鉴定
2013/12/19 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
团代会开幕词
2015/01/28 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
Python MNIST手写体识别详解与试练
2021/11/07 Python