layui框架实战案例(21)：layui上传的哪些事(layui.upload组件、 file文件域、php后台上传)

一、核心方法与基础参数选项

  upload.render({
            elem: '#uploadlicense'//指向容器选择器
            , url: '?m=Index&a=indexDeal&act=upImg&fromType=license'/服务端上传接口
            , data: {user_id:user_id}//请求上传接口的额外参数。如：data: {id: 'xxx'}
从 layui 2.2.6 开始，支持动态值
            , multiple: false//是否允许多文件上传
            , size: 102400//设置文件最大可允许上传的大小，单位 KB
            , accept: 'file'//指定允许上传时校验的文件类型
            , acceptMime: 'image/jpg'//规定打开文件选择框时，筛选出的文件类型，值为用逗号隔开的 MIME 类型列表
            , exts: 'jpg|jpeg|bmp'//允许上传的文件后缀
            , number: 1//设置同时可上传的文件数量，一般配合 multiple 参数出现
            , before: function (obj) {
                loadingIndex = layer.load();
            }
            //执行上传请求后的回调。返回三个参数，分别为：res（服务端响应信息）、index（当前文件的索引）、upload（重新上传的方法，一般在文件上传失败后使用）
            , done: function (res, index) {
                layer.close(loadingIndex);
                if (res.code != "0") {
                    return layer.msg('上传失败:' + res.msg);
                }
                if (res.code == "0") {
                    $("#user_license").val(res.imgUrl);
                    var imgHtml = "<a href=\"" + res.imgUrl + "\" target=\"_blank\" class=\"layui-btn\">预览</a>";
                    $("#pre_user_license").html(imgHtml);
                }
            }
        });

二、使用upload组件

1.调用layui.upload

layui.use('upload', function(){
  var upload = layui.upload;

2.文件上传进度条

在网速一般的情况下，大文件的上传通常需要一定时间的等待，而浏览器并不会醒目地告知你它正在努力地上传中，此时为了提升用户体验，我们可以通过该回调制作一个进度条。注：该回调为 layui 2.5.5 新增

upload.render({
  elem: '#id'
  ,url: '/api/upload/'
  ,progress: function(n, elem, res, index){
    var percent = n + '%' //获取进度百分比
    element.progress('demo', percent); //可配合 layui 进度条元素使用
    
    console.log(elem); //得到当前触发的元素 DOM 对象。可通过该元素定义的属性值匹配到对应的进度条。
    console.log(res); //得到 progress 响应信息
    console.log(index); //得到当前上传文件的索引，多文件上传时的进度条控制，如：
    element.progress('demo-'+ index, n + '%'); //进度条
  }
});

3.弹出进度条

<!--弹出进度条-->
<div id="uploadLoadingDiv" style="display: none;">
    <div class="layui-progress" lay-showpercent="true" lay-filter="lock_progress" style="margin: 20px 10px;">
        <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
    </div>
</div>

4.完整核心代码

 upload.render({
            elem: '#uploadvideo'
            , url: '?m=User&a=userDeal&act=upImg&fromType=video&user_id='+user_id
            , multiple: false
            , size: 307200
            , accept: 'video'
            , exts: 'mp4'
            , number: 1
            , before: function () {
                element.progress('lock_progress', '0%');
                layer.open({
                    type: 1,
                    title: '上传进度',
                    closeBtn: 0,
                    area: ['300px', '100px'],
                    shadeClose: false,
                    content: $("#uploadLoadingDiv").html(),
                    offset: '100px'
                });
            }
            , done: function (res) {
                layer.closeAll();
                if (res.code != "0") {
                    return layer.msg('上传失败:' + res.msg);
                }
                if (res.code == "0") {
                    $("#user_video").val(res.imgUrl);
                    var imgHtml = "<a href=\"" + res.imgUrl + "\" target=\"_blank\" class=\"layui-btn\">预览</a>";
                    $("#pre_user_video").html(imgHtml);
                }
            }
            , progress: function(n, elem, res, index){
                var percent = n + '%' //获取进度百分比
                element.progress('lock_progress', percent); //可配合 layui 进度条元素使用
                //console.log(elem); //得到当前触发的元素 DOM 对象。可通过该元素定义的属性值匹配到对应的进度条。
                //console.log(res); //得到 progress 响应信息
                //console.log(index); //得到当前上传文件的索引，多文件上传时的进度条控制，如：
                element.progress('lock_progress', n + '%'); //进度条
            }
            ,error:function (index,upload){
                //console.log(index,upload);
            }
        });

5.效果预览

• 编辑时，读取数据库自动进行预览；
• 上传时，通过下面JQ代码进行按钮替换展示；

 if (res.code == "0") {
  $("#user_video").val(res.imgUrl);
  var imgHtml = "<a href=\"" + res.imgUrl + "\" target=\"_blank\" class=\"layui-btn\">预览</a>";
 $("#pre_user_video").html(imgHtml);
}

6.后台上传代码

• $fromType = get_param('fromType')，按照前端上传需求，自动创建目录进行分类；
• $user_id，根据每个用户的$user_id进行命名，便于查找和确认；
• $ext = strtolower(end($ext));将文件后缀名，统一转为小写字母；
• $token，基于安全需要，建议每次上传自动生成验证值，防止越权上传；

 //上传资料
    case "upImg";
        $fromType = get_param('fromType');//文件归属
        $upload_dir = 'upload';
        $user_id = get_param('user_id');
        $file = $_FILES['file'];
        $imgUrl = $upload_dir . '/' . $fromType;
        $allow_type = array('application/pdf', 'image/png', 'image/jpeg', 'video/mp4');        //01.服务器端检查上传文件类型;
        $tmpname = $file['tmp_name'];
        if ($tmpname == "") {
            $res['code'] = "1";
            $res['msg'] = "无法获取上传文件";
            die(json_encode_lockdata($res));
        }
        $finfo = finfo_open(FILEINFO_MIME_TYPE);//返回 mime 类型
        $mimetype = finfo_file($finfo, $tmpname);
        finfo_close($finfo);        if (!in_array($mimetype, $allow_type)) {
            $res['code'] = "1";
            $res['msg'] = "不支持该文件类型上传";
            die(json_encode_lockdata($res));
        }        //02.检测内容是否包含木马;
        if (checkHex($tmpname) != 0) {
            $res['code'] = "1";
            $res['msg'] = "文件包含危险信息";
            die(json_encode_lockdata($res));
        }        //创建目录
        if (!is_dir($upload_dir)) {
            mkdir($upload_dir);
        }        if (!is_dir($imgUrl)) {
            mkdir($imgUrl);
        }        //处理文件名;
        $ext = explode('.', $_FILES['file']['name']);
        $ext = strtolower(end($ext));
        $fileName = $user_id . "_" . md5(time()) . "." . $ext;        //执行上传;
        if (isset($_FILES['file']) && $_FILES['file']['error'] == "0") {
            move_uploaded_file($file['tmp_name'], $imgUrl . "/" . $fileName);
            $safe_img = $imgUrl . "/" . $fileName;            //返回JSON；
            $res['code'] = "0";
            $res['imgUrl'] = $safe_img;
            $res['msg'] = '上传成功!';
            die(json_encode_lockdata($res));
        }
        break;

7.附带参数data

• 在测试过程中，官网文档传参方式data: {id: 'xxx'}或

data: {
  id: function(){
    return $('#id').val();
  }
}

两种方式，但是未成功。经多次测试，后端获取data的方式我post:

$user_id = $_POST['user_id'];

• 使用url传参url: '?m=User&a=userDeal&act=upImg&fromType=video&user_id='+user_id

@漏刻有时