tp5 uploadify上传照片

1.引入文件

<!-- 引入uploadify条件 -->
    <script type="text/javascript" src="__HOME__/style/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="/uploadify/jquery.uploadify.min.js"></script>
    <!-- layer -->
    <script src="/layer/layer.js" type="text/javascript"></script>

2.前端代码

<div class="form-group">
    <label for="username" class="col-sm-2 control-label no-padding-right">缩略图</label>
    <div class="col-sm-6">
        <label>
            <div id="file_upload"></div>
            <input type="hidden" value="" name="pic" />
        </label>

        <label>
            <div id="file_del" class="uploadify-button btn btn-info btn-sm">
            <span class="glyphicon glyphicon-refresh"></span>
            撤销上传</div>
        </label>
    </div>
    <p class="help-block col-sm-4 red">* 必填</p>
</div>

<!-- display:none设置div不可见 -->
<div class="form-group" id="artimgdiv" style="display: none;">
    <label for="username" class="col-sm-2 control-label no-padding-right"></label>
    <div class="col-sm-6">
        <label id="artimg"></label>
    </div>
</div>

js代码

<script type="text/javascript">
$(function() {
    // 上传图片
    $('#file_upload').uploadify({
        //指定swf文件
        'swf' : '/uploadify/uploadify.swf',
        //后台处理页面
        'uploader' : "{:url('Article/upimg')}",
        //设置上传进度显示方式，percentage显示上传百分比，speed显示上传速度
        'progressData':'speed',
        //设置按钮文本
        'buttonText' : '上传图片',
        'buttonClass':'btn btn-info btn-sm',
        //只允许上传图像
        'fileTypeDesc' : 'Image Files',
        //限制允许上传的图片后缀
        //'fileTypeExts' : '*.gif; *.jpg; *.png',
        //限制上传的图片大小
        // 'fileSizeLimit' : '2000KB',
        //设定发送数据的name值
        'fileObjName' : 'img',
        //每次成功上传后执行的回调函数，从服务端返回数据到前端
        'onUploadSuccess' : function(file, data, response) {
            $("input[name='pic']").val(data);
            var artimg = data;
            var showart = "<img src='"+artimg+"' height='70' alt=''>";
            $("#artimgdiv").show();//设置div可见
            $("#artimg").html(showart);
            layer.alert('上传成功！', {icon: 1});
        }
    });
    $('#file_upload-button').prepend('<span class="glyphicon glyphicon-open"></span>&nbsp;');
    $('#file_upload-button').removeAttr('style');//删除style防止css重复出错

    // 撤销图片
    $("#file_del").click(function(){
        var img = $("#artimg").find('img');
        var imgurl = img.attr('src');
        if(!imgurl){
            layer.alert('你还没有上传图片！', {icon: 2});
        }else{
            $("#artimgdiv").hide();//隐藏div
            $("input[name='img']").val('');
            $.ajax({
                type:"post",
                dataType:"json",
                data:{imgurl:imgurl},
                url:"{:url('article/delimg')}",
                success:function(data){
                    if(data==1){
                        layer.alert('撤销成功！', {icon: 1});
                    }else{
                        layer.alert('撤销失败！', {icon: 2});
                    }
                }
            });
        }
    });

});
</script>

2.后台代码

//uploadify上传照片
    public function upimg()
    {
        $file = request()->file('img');
        // 移动到框架应用根目录/public/uploads/ 目录下
        $info = $file->move(ROOT_PATH . 'public/uploads/article');
        if($info){
            // 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
            //echo $info->getSaveName();
            $savename = str_replace("\\", "/", $info->getSaveName());//把路径中的\转换为/
            $pic =  '/uploads/article' . '/'.$savename;
            echo $pic;
        }else{
            // 上传失败获取错误信息
            echo $file->getError();
        }
    }

//撤销图片
    public function delimg()
    {
        if(request()->isAjax()){
            $imgurl = input('imgurl');
            $url = $_SERVER['DOCUMENT_ROOT'].$imgurl;
            //判断文件是否存在，这里文件是具体到哪个盘下面
            $res = @unlink($url);//unlink() 函数删除文件
            if($res){
                return 1;
            }else{
                return 2;
            }
        }
    }

上传图标不显示，可能是js引用与原有的js文件的冲突，调换位置即可