# 初始配置

配置分前台与后台处理脚本两个部分。

# 前台配置

如果使用Laravel 等有CSRF验证的框架需要在head标签内容添加:

<meta name="csrf-token" content="{{ csrf_token() }}">

需要在引入 require.js 前配置后台上传与列表地址,并以 ? 结尾

<script>
	window.hdjs = {};
	window.hdjs.base = '../';
	window.hdjs.uploader = 'php/uploader.php?';
	window.hdjs.filesLists = 'php/filesLists.php?';
</script>
<script src="../require.js"></script>
<script src="../config.js"></script>

上传图片时系统会添加 $_GET['type']=image ,文件时 $_GET['file']=file

# 后台脚本

# 上传处理

成功时返回数据

$json = ['file' =>'php/'. $file, 'code' => 0];
die(json_encode($json));

失败时返回数据

$json = ['message' =>'没有访问权限'. $file, 'code' => 403];
die(json_encode($json));

# 列表数据

上传提供选择以往上传文件的功能,后台需要返回文件列表数据。

{
    data: [
        {
            path: "http://dev.hdcms.com/uploads/1808/29/zteThWkvuY1535532843.5167.jpg",
            url: "http://dev.hdcms.com/uploads/1808/29/zteThWkvuY1535532843.5167.jpg"
        }
    ],
    page: "<ul class="pagination" role="navigation"> <li class="page-item disabled" aria-disabled="true" aria-label="&laquo; 上一页"> <span class="page-link" aria-hidden="true">&lsaquo;</span> </li> <li class="page-item active" aria-current="page"><span class="page-link">1</span></li> <li class="page-item"><a class="page-link" href="http://dev.hdcms.com/util/upload/lists?page=2">2</a></li> <li class="page-item"><a class="page-link" href="http://dev.hdcms.com/util/upload/lists?page=3">3</a></li> <li class="page-item"> <a class="page-link" href="http://dev.hdcms.com/util/upload/lists?page=2" rel="next" aria-label="下一页 &raquo;">&rsaquo;</a> </li> </ul> ",
    code: 0
}

# 图片上传

参考文档: [http://fex.baidu.com/webuploader]

# 组件参数

下面介绍上传时可定义的参数

属性 说明 示例
width 弹窗宽度 width:’100%’
extensions 可使用扩展名 extensions: ‘gif,jpg,jpeg,png’,
multiple 多图上传 multiple:true
fileSizeLimit 允许上传文件总大小(字节) fileSizeLimit: 200 * 1024 * 1024 , 默认200MB
fileSingleSizeLimit 允许上传单个文件大小(字节) fileSingleSizeLimit: 20 * 1024 * 1024,默认2MB
compress 压缩图片 compress:{ width: 1600,height: 1600}
data POST数据 data:{name:’后盾人’,year:2099}
server 后台上传地址 默认为hdjs的window.hdjs.uploader 配置项

# 单图上传

aa

<div class="col-sm-8">
    <div class="input-group mb-1">
        <input class="form-control  form-control-sm" name="thumb" readonly="" value="">
        <div class="input-group-append">
            <button onclick="upImagePc(this)" class="btn btn-secondary" type="button">单图上传</button>
        </div>
    </div>
    <div style="display: inline-block;position: relative;">
        <img src="../image/nopic.jpg" class="img-responsive img-thumbnail" width="150">
        <em class="close" style="position: absolute;top: 3px;right: 8px;" title="删除这张图片"
            onclick="removeImg(this)">×</em>
    </div>
</div>
<script>
    require(['hdjs','bootstrap']);
    //上传图片
    function upImagePc() {
        require(['hdjs'], function (hdjs) {
            var options = {
                multiple: false,//是否允许多图上传
                //data是向后台服务器提交的POST数据
                data: {name: '后盾人', year: 2099},
            };
            hdjs.image(function (images) {
                //上传成功的图片,数组类型
                $("[name='thumb']").val(images[0]);
                $(".img-thumbnail").attr('src', images[0]);
            }, options)
        });
    }
    //移除图片
    function removeImg(obj) {
        $(obj).prev('img').attr('src', '../dist/static/image/nopic.jpg');
        $(obj).parent().prev().find('input').val('');
    }
</script>

# 多图上传

aa

<style>
    #box img {
        width: 200px;
        float: left;
        margin-right: 10px;
        border: solid 1px #999;
        padding: 10px;
        height: 200px;
    }
</style>
<button onclick="upImageMul(this)" class="btn btn-default" type="button">选择图片</button>
<div id="box"></div>
<script>
    require(['hdjs']);
    //上传图片
    function upImageMul(obj) {
        require(['hdjs'], function (hdjs) {
            hdjs.image(function (images) {
                $(images).each(function (k, v) {
                    $("<img src='" + v + "'/>").appendTo('#box');
                })
            }, {
                //上传多图
                multiple: true,
            })
        });
    }
</script>

# 文件上传

上传除图片外的其他文件资源。

上传图片建议使用图片上传组件,图片组件可以提供图片预览功能。

# 组件参数

下面介绍上传时可定义的参数

属性 说明 示例
width 弹窗宽度 width:’100%’
extensions 可使用扩展名 extensions: ‘doc,ppt,wps,zip,txt,jpg,jpeg,png,gif’
fileSizeLimit 允许上传文件总大小(字节) fileSizeLimit: 200 * 1024 * 1024 , 默认200MB
fileSingleSizeLimit 允许上传单个文件大小(字节) fileSingleSizeLimit: 20 * 1024 * 1024,默认5MB
data POST数据 data:{name:’后盾人’,year:2099}
server 后台上传地址 默认为hdjs的window.hdjs.uploader 配置项

# 使用示例

aa

<button onclick="upFile(this)" class="btn btn-default" type="button">选择文件</button>
<script>
    require(['hdjs']);
    //上传图片
    function upFile() {
        require(['hdjs'], function (hdjs) {
            var options = {
                extensions: 'txt,php',
                //data是向后台服务器提交的POST数据
                data:{name:'后盾人',year:2099},
                //单个文件允许为5MB
                fileSingleSizeLimit:5 * 1024 * 1024
            };
            hdjs.file(function (files) {
                //上传成功的文件,数组类型
                console.log(files);
            }, options)
        });
    }
</script>