zoukankan      html  css  js  c++  java
  • Thinkphp+Uploadify

    1、先下载插件(下载地址https://files.cnblogs.com/Tongjanghu/Uploadify.rar)

    2、引入文件

      Jq要在插件之前

    <link rel="stylesheet" href="__PUBLIC__/Uploadify/uploadify.css"/>
    <script type="text/javascript" src='__PUBLIC__/Js/jquery-1.7.2.min.js'></script>
    <script type="text/javascript" src='__PUBLIC__/Uploadify/jquery.uploadify.min.js'></script>

    3、form表单,现在已经不是直接上传文件了,而是上传文件路径,因为Uploadify已经把文件上传了。我们只需要在php端返回相应的地址就好,在把返回的地址放到隐藏域中,然后提交的时候就是提交文件路径了

    <form action="{:U(editFace)}" method='post'>
        <div class='edit-face'>
        <img src="<if condition='$user.face180 eq ""'>__PUBLIC__/Images/noface.gif<else />__ROOT__/Uploads{$user.face180}</if>" width="180" height="180" id="face_img" />
        <p style="text-align: center;"><input type="file" name="face" id="face"></p>
        <p>
            <input type="hidden" value='' name="face180">
            <input type="hidden" value='' name="face80">
            <input type="hidden" value='' name="face50">
            <input type="submit" value='保存修改' class='edit-sub'/>
        </p>
        </div>
    </form>

    4、代码

    js

        //头像上传Uploadify插件
        $('#face').uploadify({
            swf             : '__PUBLIC__/Uploadify/uploadify.swf',    //flash插件地址
            uploader        : "{:U('Comment/uploadFace')}",        //提交到哪里(见下面php代码)
            width           : 120,                       //上传按钮宽度(插件的CSS自带鼠标移入偏移)
            height          : 30,                       //上传按钮高度(同上)
            buttonImage     : '__PUBLIC__/Uploadify/browse-btn.png',   //上传按钮的地址
            fileTypeDesc    : 'Image File',                  //上传文件的类型
            fileTypeExts    : '*.jpeg; *.jpg; *.gif; *.png',       //上传文件的允许后缀
            onUploadSuccess : function(file,data,response){         //回调函数
                eval('var data=' + data);                  //把php端回调的数据执行为json对象,以便进一步操作
                if(data.status){
                    $('#face_img').attr('src','__ROOT__/Uploads'+data.path.max);
                    $('input[name=face180]').val(data.path.max);
                    $('input[name=face80]').val(data.path.medium);
                    $('input[name=face50]').val(data.path.mini);
                }else{
                    alert(data.msg);
                }
            }
        });

    php

        /**
         * 头像上传
         */
        public function uploadFace(){
            if (!IS_POST) {
                E('页面不存在!');
            }
            $upload = $this->_upload('Face',1);
            echo json_encode($upload);
        }
        
        /**
         * 图片上传处理
         * @param string $path   保存文件路径
         * @param bool   $thumb  是否生成缩略图(0:不生成,1:生成)
         * @return array         图片上传后的信息
         */
        private function _upload($path,$thumb=0){
            $obj = new ThinkUpload();
            $obj->maxSize        = C('UPLOAD_MAX_SIZE');     //允许上传的最大大小
            $obj->savePath       = C('UPLOAD_PATH').$path . '/'; //文件上传的保存路径(相对于根路径)
            $obj->saveName       = array('uniqid','');                 //文件名规则:唯一
            $obj->replace        = true;                     //同名文件覆盖
            $obj->exts           = C('UPLOAD_EXTS');         //允许上传文件的后缀
            $obj->autoSub        = true;                     //使用子目录
          //$obj->subName        = array('date','Y_m');      //以日期(格式为Y_m)为子目录
            $obj->subName        = 'get_uid';                //用自定义函数获取用户id,以用户id为文件夹
            $msg = $obj->upload();
            if(!$msg){
                return array('status' =>0, 'msg'=>$obj->getError());        //上传原图出错返回
            }  else {
                if ($thumb) {
                    $original    = new ThinkImage();
                    $savepath    = $msg['Filedata']['savepath'];
                    $savename    = $msg['Filedata']['savename'];
                     //组合缩略图路径
                    $max_path    = substr($savepath.'max_'.$savename,1);
                    $medium_path = substr($savepath.'medium_'.$savename,1);
                    $mini_path   = substr($savepath.'mini_'.$savename,1);
                    //打开原图
                    $original->open('Uploads'.substr($msg['Filedata']['savepath'].$msg['Filedata']['savename'],1));
                    //依次生成180*180,80*80,50*50的缩略图
                    $original->thumb(180, 180)->save('Uploads'.$max_path);  
                    $original->thumb(80, 80)->save('Uploads'.$medium_path);
                    $original->thumb(50, 50)->save('Uploads'.$mini_path);
                    
                    return array(
                        'status'=>1,
                        'path'=>array(
                            'max'=>$max_path,
                            'medium'=>$medium_path,
                            'mini'=>$mini_path
                        )
                    );
                }
            }
        }

     5、现在form表单就可以提交哪些隐藏域中的地址了(存入数据库)。

  • 相关阅读:
    CSS(十二)--响应式布局
    CSS(十一)-- 手机像素
    CSS(十)-- 弹性盒子
    CSS常用属性
    CSS(九)-- less(css的预处理语言)
    CSS(八)-- 变形(过渡、动画、平移、旋转、缩放)
    HTML(二)-- 表格、表单
    原生javascript实现模拟拖拽事件
    JavaScript检测数据类型及模仿jQuery中的数据类型检测
    JavaScript数组常用方法总结
  • 原文地址:https://www.cnblogs.com/Tongjanghu/p/4152608.html
Copyright © 2011-2022 走看看