easyUi--Uploadify文件上传

* Html端 */
<div title="相册信息" class="tab2" >
    <input type="file" id="file">
    <div id="img_text"><span class="img_total">0</span>,还能上传<span class="img_limit">8</span></div>
    <div id="img_content">

    </div>
</div>


/**
 * 图片上传
 * swf : uploadify falsh插件
 * uploader : 后端上传路径
 * width : 上传按钮宽度
 * height: 上传按钮高度
 * fileTypeDesc : 文件类型
 * fileTypeExts : 可以上传的图片后缀
 * fileSizeLimit : 限制上传图片的大小
 * overrideEvents : 覆盖系统提示错误
 * onSelectError : 图片上传错误信息
 * onUploadStart : 上传之前的方法
 * onUploadSuccess : 上传成功后的回调函数 file:上传后的图片信息 data:上传后的后端输出的回调信息 response:上传成功返回true,失败返回false
 */
var img_total = 0; //共几张图片
var img_limit = 8; //还能上传几张图片

$("#file").uploadify({
    swf:ThinkPHP['UPLOADIFY']+'/uploadify.swf',
    uploader:ThinkPHP['UPLOADER'],
    width:120,
    height:35,
    fileTypeDesc:'图片类型',
    buttonCursor:'pointer',
    buttonText:'上传图片',
    fileTypeExts:'*.jpeg; *.jpg; *.gif; *.png;',
    fileSizeLimit:'1MB',
    overrideEvents:['onSelectError','onDialogClose','onSelect'],
    onSelectError:function (file,errorCode,errorMsg) {
        switch (errorCode){
            case -110:
                $.messager.alert('警告','上传图片超过1MB限制!','warning');
                break;
        }
    },
    onUploadStart:function () {
        if(img_total == 8){ //图片上传到8张 停止上传
            $("#file").uploadify('stop');
            $("#file").uploadify('cancel');
            $.messager.show({
                title:'我的消息',
                msg:'图片单次只能上传8!',
                timeout:5000,
                showType:'slide'
            });

        }else{

            //图片预加载
            $("#img_content").append(
                    '<div id="img">' +
                        '<img class="images" src="__IMG__/loading.jpg" >' +
                        '<img id="close" src="__IMG__/close.png">' +
                    '</div>');
        }
    },
    onUploadSuccess:function(file,data,response){

        var img_datas = $.parseJSON(data);//接收PHP返回的JSON数据,转换成对象

        $("#img_content").append( //每次添加一个图片 就在其后面添加一个隐藏表单
                '<input type="hidden" name="thumb" value='+data+' >'
        );

        //替换预加载图片路径
        var images = $("#img_content .images");
        var images_len = $("#img_content .images").length;
        var images_src = '__ROOT__/'+img_datas.file_180;
        $(images[images_len-1]).attr('src',images_src).hide(); //预加载后 图片替换路径 先隐藏
        setTimeout(function () { //50毫秒后淡入真实图片
            $(images[images_len-1]).attr('src',images_src).fadeIn();
        },50)

        //点击图片显示关闭按钮
        var img = $("#img_content #img");
        var len = $("#img_content #img").length;
        $(img[len-1]).hover(function () {
            $(this).find('#close').show();
        },function () {
            $(this).find('#close').hide();
        });

        //点击删除图片
        var close = $("#img_content #close");
        var close_len = $("#img_content #close").length;
        $(close[close_len-1]).click(function () {

            //删除隐藏表单
           $(this).parent().next('input[name="thumb"]').remove();

           //删除图片
           $(this).parent().remove();
            //上传图片张数限制
            img_total--;
            img_limit++;
            $(".img_total").text(img_total);
            $(".img_limit").text(img_limit);

        });

        //上传图片张数限制
        img_total++;
        img_limit--;
        $(".img_total").text(img_total);
        $(".img_limit").text(img_limit);
    },

});
/* 图片上传结束 */

//PHP端上传图片
public function upload(){
    $upload = new \Think\Upload();// 实例化上传类
    $upload->maxSize   =     1048576 ;// 设置附件上传大小 1*1024*1024 == 1MB
    $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
    $upload->rootPath  =     './'; // 设置附件上传根目录
    $upload->savePath  =     'Uploads/'; // 设置附件上传(子)目录
    // 上传文件
    $info   =   $upload->upload();
    if(!$info) {// 上传错误提示错误信息
        $this->error($upload->getError());
    }else{// 上传成功
        foreach($info as $file){
            $file_name = $file['savepath'].$file['savename'];
        }
        $image = new \Think\Image();
        $image->open($file_name);
        $save180_name = $file['savepath'].'180_'.$file['savename'];
        $image->thumb(180, 180,\Think\Image::IMAGE_THUMB_CENTER)->save($save180_name);

        $image->open($file_name);
        $save550_name = $file['savepath'].'550_'.$file['savename'];
        $image->thumb(550, 550,\Think\Image::IMAGE_THUMB_CENTER)->save($save550_name);
        
        $img_datas = array(
            'file_name'=>$file_name,
            'file_180'=>$save180_name,
            'file_550'=>$save550_name
        );
        $this->ajaxReturn($img_datas); //三张图格式转为json
    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值