imlzw-xfile
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>XFile文件上传组件</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
    <script>
        layui.config({
            base: './layui/lay/module/'
        }).extend({
            xFile: '{/}./xFile/xFile',
        });
    </script>
	<style>
		body{
			background: #676666;
		}
        .hide {
            display: none;
        }

        .demo{
            width: 600px;
			margin: auto;

        }
	</style>
</head>

<body style="padding: 18px;">
	<div class="layui-card demo">
		<div class="layui-card-header">
			<a href="https://gitee.com/imlzw/xfile" target="_blank">XFile文件上传组件</a>
		</div>
		<div class="layui-card-body">
			<div class="layui-form">
				<div class="layui-form-item">
					<label for="" class="layui-form-label">文件上传：</label>
					<div class="layui-input-block">
						<input type="text" id="file" class="hide" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label for="" class="layui-form-label">图片上传：</label>
					<div class="layui-input-block">
						<input type="text" id="image" value="" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label for="" class="layui-form-label">图片裁剪：</label>
					<div class="layui-input-block">
						<input type="text" id="cropImage" value=""  class="layui-input">
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

<script>
layui.use(["xFile"],function(){
    let xFile = layui.xFile;
    xFile.render({
    	id: 'file',
    	base: './xFile/',
    	url: '/file/upload',
    	cropImages: false,
    	accept: 'file',
    	multiple: true,
    });
    xFile.render({
    	id: 'image',
    	base: './xFile/',
    	url: '/file/upload',
    	cropImages: false,
    	accept: 'images',
    	multiple: true,
    });
    xFile.render({
    	id: 'cropImage',
    	base: './xFile/',
    	url: '/file/upload',
    	cropImages: true,
    	accept: 'images',
    	multiple: true,
    });
});
</script>

</html>