PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > ThinkPhp教程 > 正文

    thinkphp3.2:上传预览+缩略图+水印实例

    作者:w634381967来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:uploadify上传预览+缩略图+水印实例首先感谢各位大神网友的分享,我只是改改代码,让其更符合自己的业务逻辑图片上传+缩略图+水印处理代码...
    uploadify上传预览+缩略图+水印实例
    首先感谢各位大神网友的分享,我只是改改代码,让其更符合自己的业务逻辑
    图片上传+缩略图+水印处理代码:

     
    复制代码 代码如下:
        //文件上传
        Public function _upload( $thumb = false , $thumbWidth = '' , $thumbHeight = '') {
            $upload = new \Think\Upload();// 实例化上传类
            $upload->maxSize = 3145728 ;// 设置附件上传大小
            $upload->exts =  array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
            $upload->savePath =  '/' . CONTROLLER_NAME .'/'; // 设置附件上传目录
            $info = $upload->upload();
            if(!$info) {
                return array('status' =>0, 'info'=> $upload->getError() );
            }else{
                if( $thumb ) {    //生成缩略图

                    $image = new \Think\Image();

                    foreach($info as $file) {
                        $thumb_file = './Uploads/' . $file['savepath'] . $file['savename'];
                        $save_path = './Uploads/' .$file['savepath'] . 'mini_' . $file['savename'];
                        $image->open( $thumb_file )->text('德兴房产','./data/1.otf',30,'#A7AAA4',\Think\Image::IMAGE_WATER_SOUTHWEST)->save( $thumb_file );
                        $image->open( $thumb_file )->text('德兴房产','./data/1.otf',24,'#A7AAA4',\Think\Image::IMAGE_WATER_SOUTHWEST)->thumb( $thumbWidth, $thumbHeight )->save( $save_path );
                        return array(
                            'status' => 1,
                            'savepath' => $file['savepath'],
                            'savename' => $file['savename'],
                            'pic_path' => $file['savepath'] . $file['savename'],
                            'mini_pic' => $file['savepath'] . 'mini_' .$file['savename']
                        );  
                    }
                }else{
                    foreach($info as $file) {
                        return array(
                            'status' => 1,
                            'savepath' => $file['savepath'],
                            'savename' => $file['savename'],
                            'pic_path' => $file['savepath'].$file['savename']
                        );  
                    }
                }
            }
        }

    前端主要代码(参考http://www.bcty365.com/content-83-1023-1.html):

     
    复制代码 代码如下:
                            <div class="tab-pane" id="tab3">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="tab-pane">
                                            <div class="form-group">
                                                <input type="file" id="upload" class="form-control input-medium" />
                                            </div>
                                            <div style="width:100%; float:left;padding:10px 20px 20px; background-color:#ccc">
                                                <p>
                                                    <ul class="imagelist" id="image_result"></ul>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div> <!-- END #TAB3 -->

                            <div class="margin-top-10">
                                <button type="submit" class="btn green ajax-post">确 认</button>
                                <a href="javascript:" onclick="javascript:history.back(-1);return false;" class="btn default">返 回</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </block>
    <block name="foot">
        <link href="__PUBLIC__/assets/plugins/uploadify/uploadify.css" rel="stylesheet" type="text/css"/>
        <link href="__PUBLIC__/assets/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
        <script src="__PUBLIC__/assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript" ></script>
        <script src="__PUBLIC__/assets/plugins/uploadify/jquery.uploadify.min.js" type="text/javascript" ></script>
        <script type="text/javascript">
        $(function(){
            var sid = "{:session_id()}";
            $('#upload').uploadify({
                'swf':'__PUBLIC__/assets/plugins/uploadify/uploadify.swf',
                'buttonText': '选择图片',
                'formData': { 'session_id':sid},
                'uploader': "{:U('uploadPic')}",
                'fileTypeDesc':'Image File',
                'fileTypeExts':'*.jpg; *.jpeg; *.gif; *.png',
                          'auto' : true,
                'removeCompleted': false,
                onUploadSuccess: function(file, data, response) {
                    $('#progress').hide();
                    var result = $.parseJSON(data);
                    //错误处理。。。
                    if(result.status == 0){
                        alert(result.info);
                        return false;
                    }
                    //上传成功
                    var id = Math.random().toString();
                    id = id.replace('.','_'); //生成唯一标示
                    var html = '<li class="imageitem" id="'+id+'">';
                        html+= '<input type="hidden" name="file[]" value="'+result.pic_path+'">'; //隐藏域,是为了把图片地址入库。。
                        html+= '<input type="hidden" name="minifile[]" value="'+result.mini_pic+'">'; //隐藏域,是为了把图片地址入库。。
                        html+= '<img height="160" width="160" src="__ROOT__/Uploads/'+result.pic_path+'" />';
                        html+=  '<span class="txt">';
                        html+=  '<a title="删除" href=javascript:remove("'+result.pic_path+'","'+id+'");><img src="__PUBLIC__/assets/plugins/uploadify/remove.png" /></a>';
                        html+=  '<a title="设为封面" href=javascript:tocover("'+result.pic_path+'");><img src="__PUBLIC__/assets/plugins/uploadify/right.png" /></a>';
                        html+=  '</span>';
                        html+=  '<em><input class="form-control" value="'+file.name+'"></em>';
                        html+=  '</li>';
                    $('#image_result').append(html);
                },
                onUploadStart: function(){
                    $('#progress').text('正在上传...');  //用户等待提示。
                },
                onInit: function (){ 
                    $("#upload-queue").hide(); //隐藏上传队列               
                }   
            });
        });
        function remove(file,id){
            alert('删除成功!'+"\r\n"+file);
            $('#'+id).remove();
        }
        function tocover(file){
            alert('设为封面成功'+"\r\n"+file);
        }
        function check(){
            if($('input[name="title"]').val()==""){
                toastr['error']('标题不能为空!');
                return false;
            }
        }

        </script>
    </block>
    thinkphp3.2:上传预览+缩略图+水印实例
    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-83-1024-1.html
    相关热词搜索: thinkphp3.2 缩略图