Thinkphp3.1--uploadify上传插件的使用

依次复制文档里面的内容即可运行..
第一步:引入文档所需的css和js文件
js文件

<script src="__PUBLIC__/uploadify3.1/jquery.js" type="text/javascript"></script>
    <script src="__PUBLIC__/uploadify3.1/jquery.uploadify.min.js" type="text/javascript"></script>

css文件

<link rel="stylesheet" type="text/css" href="__PUBLIC__/uploadify3.1/uploadify.css">

本文档的地址只是例子,具体按需要修改。
第二步:放入html文件

<!--上传文件位置-->
<input type="file" name="file_upload" id="file_upload" class="filemove"/>

<!--插入图片位置-->
<!--多图片上传-->
<div class="row img_box" id="img_box"></div>

<!--插入图片位置-->
<!--单图片上传-->
<img id="image" src="" width="130" height="130" border="0" />

第三步:放入js操作文件

<script type="text/javascript">
    $(function() {
    //选择file文件上传表单
    $("#file_upload").uploadify({
        //上传字样
        'buttonText':'选择上传文件...',
        //是否自动上传
        'auto':true,
        //最大上传数量
        'uploadLimit':4,
        //设置上传进度显示方式,percentage显示上传百分比
        'progressData':'percentage',
        //是否开启debug
        //'debug':true,
        //uploadify.swf 文件的相对路径。
        'swf':'__PUBLIC__/uploadify3.1/uploadify.swf',
        //后台处理程序的相对路径
        'uploader':'{:U("Admin/Article/upload")}',
        //当文件上传成功时触发
        'onUploadSuccess' : function(file, data, response) {
            //单图片上传--给img标签的src属性设置图片路径
            //$('#image').attr('src',data);
            //多图片上传函数--插入内容 
            put_img(data);
            //单图片上传用函数
            put_name(data.substr(29));

         },
    });
            //单图片上传用
            //将文件的名字放入id为name的隐藏表单
            function put_name(yname){
            $("#name").attr("value",yname);
            }


            //添加图片到img_box
            function put_img(savepath){
                //var img_url="__ROOT__"+savepath+savename;
                //文件路径+文件名字,(从第一位开始)
                var img_url=savepath.substr(1);
                //文件路径
                var img_path = savepath.substr(0,25);
                //文件名字,从第一位开始
                var img_name = savepath.substr(25);
                //插入html内容
                var new_img='<div class="col-md-3" style="float:left;width:140;">';                 
                        new_img+='<img src="'+img_url+'" alt="test" class="img">';
                        //删除链接
                        new_img+='<div class="img_ctrl">';
                            new_img+='<span class="glyphicon glyphicon-trasha btn" data-toggle="tooltip" data-placement="bottom" title="删除文件" aria-hidden="true" style="width:140;><a id="del">删除</a></span>';
                        new_img+='</div>';
                    new_img+='</div>';
                    $('.img_box').append(new_img);
            }


            $(".glyphicon-trasha").live("click", function(event) {
            //取消事件
            event.preventDefault();
            //选择本对象的父亲div.col-md-3
            var div=$(this).parents('div.col-md-3');
            //寻找里面是img类的src属性--即路径信息
            var img_url=div.find('.img').attr('src');
            $.ajax({
                    url: '{:U("Admin/Article/delUp",null,false)}',
                    type: 'POST',
                    //传送数据数据地址
                    data: {url: img_url},
                    //成功返回后执行的函数
                    success:function(data){
                        if (!data['status']) {
                            alert(data['info']);
                            return false;
                        }else{
                            alert(data['info']);
                            div.fadeOut(2000);
                            div.remove();
                        };
                    }
                }); 
            });
        });

</script>

第四步:放入后台文件

public function upload(){
        if (!empty($_FILES)) {
            //引入UploadFile类
            import('ORG.Net.UploadFile');
            //实例化UploadFile类
            $upload  = new UploadFile();
            $upload->maxSize = 2048000;
            $upload->allowExts = array('jpg','jpeg','gif','png');
            $upload->savePath = "./Public/uploadifyimages/";
            $upload->thumb = true; //设置缩略图
           // $upload->imageClassPath = "@.ORG.Image";
            $upload->thumbPrefix = "130_"; //生成多张缩略图
            $upload->thumbMaxWidth = "130";
            $upload->thumbMaxHeight = "130";
            $upload->saveRule = uniqid; //上传规则
            $upload->thumbRemoveOrigin = true; //删除原图
            if(!$upload->upload()){
                $this->error($upload->getErrorMsg());//获取失败信息
            } else {
                $info = $upload->getUploadFileInfo();//获取成功信息
            }
            echo $info[0]['savepath'].'130_'.$info[0]['savename'];    //返回文件名给JS作回调用
        }
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值