uploadify的使用

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示。

我用的版本是2.2.

<!DOCTYPE html>
<html>
    <include file="./Tpl/head" />
    <body>
        <!--引用css-->
    <link href="/Skin/public/uploadify/uploadify.css" type="text/css" rel="stylesheet">
        <include file="./Tpl/top" />
        <div id="main-container">

            <div>
                <a id="menu-toggler" href="#">
                    <span></span>
                </a>
                <include file="./Tpl/left" />
                <div>
                    <div id="breadcrumbs">
                        <script type="text/javascript">
                            try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
                        </script>
                        <ul>
                            <li><i class="icon-home home-icon"></i><a href="{:U('/Admin/Index/index')}">管理后台</a></li>
                            <li>{$column_name}管理</li>
                            <li>修改</li>
                        </ul><!– .breadcrumb –>
                    </div>
                    <div>
                        <div>
                            <div>
                                <div class="widget-header widget-header-small">
                                    <h5>修改内容</h5>
                                </div>
                                <div></div>    
                                <form id="updateForm" action="{:U('Admin/Home/caseUpdate')}" 
                                method="POST" enctype="multipart/form-data" onsubmit="return jQuery(this).validationEngine('validate');" role="form">
                                <input type="hidden" name="c_id" value="{$data.c_id}" />
                                <input type="hidden" name="httpref" value="{$httpref}" />
                                    <div>
                                        <label class="col-sm-1 control-label no-padding-right" 
                                        for="form-field-1"> 标题 </label>
                                        <div>
                                            <input type="text" name="c_name" 
                                            value="{$data['c_name']}" placeholder="如李潇潇" class="col-xs-10 col-sm-5 validate[required,maxSize[40]]" />
                                        </div>
                                    </div>
                                    
                                    <div>
                                        <label class="col-sm-1 control-label no-padding-right" 
                                        for="form-field-1"> 头像 </label>
                                        <div>
                                            <input type="file" name="file_upload" 
                                            id="file_upload"/>&nbsp;&nbsp;大小223px431px;
                                            <input type="hidden" name="c_avatar" 
                                            id="c_avatar" value="{$data['c_avatar']}"/>
                                            <p><img src="{$data['c_avatar']}" style="width: 80px; height: 100px;" id="newsimg" class="newsimgpre uploadimg"></p>
                                        </div>
                                    </div>
                                    
                                    
                                    
                                    <div class="clearfix form-actions">
                                        <div class="col-md-offset-1 col-md-11">
                                            <button class="btn btn-info" onclick="$('#updateForm').submit();" type="button">
                                                <i class="icon-ok bigger-110"></i>
                                                提交
                                            </button>
                                            &nbsp; &nbsp; &nbsp;
                                            <a id="backid">
                                                <i class="icon-undo bigger-110"></i>
                                                返回列表
                                            </a>
                                        </div>
                                    </div>
                                </form>
                                
                            </div>
                        </div>
                    </div>
                </div>
                <include file="./Tpl/bottom" />
            </div>
            <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
                <i class="icon-double-angle-up icon-only bigger-110"></i>
            </a>
        </div><!– /.main-container –>
    <include file="./Tpl/foot" />
    <!–引用js–>
    <script type="text/javascript" src="/Skin/public/uploadify/jquery.uploadify.min.js"></script>
    <script>
    $(function(){
        
        $('#file_upload').uploadify({
            //注意这里  uploadify无法传递session  只能通过formData
            'formData'     : {
                '<?php echo session_name();?>' : '<?php echo session_id();?>',
                'timestamp' : '<?php echo $timestamp;?>',
                'token'     : '<?php echo md5('unique_salt' . $timestamp);?>'
            },
            'swf'      : '/Skin/public/uploadify/uploadify.swf',
            'uploader' : "{:U('Admin/Home/uploadify')}",
            'buttonText'    :   '选择图片',
            'buttonClass'   :  'upload_button',
            'fileTypeDesc'  :   '图片文件',
            'width':'100px',
            'height':'50px',
            //'fileTypeExts'  :   '
.gif;.jpg;.png;*.jpeg',
            //'fileSizeLimit' : '50000',
            'progressData': 'percentage',
            'onUploadSuccess' : function(file, data, response) {
                //var path=data;
                //alert(data)
                var data = JSON.parse(data);
                if(data.status == 0){alert('上传失败');return false;}
                $('#newsimg').attr("src",data.data);
                $('#c_avatar').val(data.data);
            }
            // Your options here
        });
        
    });
    </script>
</body>
</html>

action

public function uploadify() {
        import('ORG.Net.UploadFile');
        $upload = new UploadFile();
        $upload->maxSize  = 20480000 ;
        $upload->allowExts  = array('jpg', 'jpeg', 'png', 'gif');
        $upload->savePath =  './Upload/case/';
        $upload->saveRule = 'uniqid';
        $return  = array('status' => 1, 'info' => '上传成功', 'data' => '');
        //$upload->saveRule = 'getrand';
        if(!$upload->upload()){
            $return['status'] = 0;
            $return['info']   = $upload->getErrorMsg();
        } else {
            $return['status'] = 1;
            $info =  $upload->getUploadFileInfo();
            $return['data']   = '/Upload/case/'.$info[0][savename];
            
        }
         echo json_encode($return);
        

    }

因为这是后台上传图片的地方,需要限制权限

/处理权限/
        $session_name = session_name();
        //dump($session_name); 
        //echo $_POST[$session_name];
        if (!isset($_POST[$session_name])){
              
            if($_SESSION['u_name'] == ''){
                  $this->error('登录已超时', U("Admin/Index/login"), 3);
             }
                
            
        }

来看看效果,还不错哟!

QQ截图20161123163546.png



uploadify的使用
https://github.13sai.com/2016/09/02/67/
作者
13sai
许可协议