# 注意：本文档后期不在跟新，新文档迁移到：[http://www.openkit.cc/docs/kitadmin/#/](http://www.openkit.cc/docs/kitadmin/#/)
#### 首先感谢使用KitAdmin后台开发框架
#### 反馈交流QQ群：696279396
> 不管你是上传单张图片到服务器本地，还是通过服务器上传单张图片到七牛云，我们都可以通过HRML的AJAX请求调用下面这个方法来实现，现在已经实现了上传到本地，上传到七牛云，需要等待一段时间
1. 首先我们需要在 html 里边实例化一个上传的 LayUI 控件
```html
<form class="layui-form " action="">
<div class="layui-form-item" >
<label class="layui-form-label" style="height: 137px; line-height: 117px"><span class="layui-badge-dot"></span> 上传图片</label>
<input name="imgurl" id="imgurl" lay-verify="required" value="" autocomplete="off" class="layui-input" type="hidden">
<div class=" layui-upload-drag" id="img" >
<i class="layui-icon"></i>
<p>点击上传图片</p>
<img id="demo1" style="position: absolute;height: 137px;width: 137px;margin: -106px auto auto -30px;display: none" />
</div>
</div>
</form>
```
> 注意上面的空间一定要放在 Form 表单里边，如果你想要其他的按钮样式的话可以自己查看layui说明文档
2. 再来我们需要在 html 文件里引用 layui 库，同时我们可以引用一下 jQuery
```html
<link rel="stylesheet" href="<%=basePath%>templates/style/plugins/layui/css/layui.css" media="all">
<link rel="stylesheet" href="<%=basePath%>templates/style/build/css/doc.css" media="all">
<script src="<%=basePath%>templates/style/plugins/layui/layui.js"></script>
<script src="<%=basePath%>templates/style/plugins/layui/jquery-3.3.1.min.js"></script>
```
3. 下面我们可以直接写一下下面的代码，即可实现突破上传
```html
<script>
layui.use(['form', 'layedit', 'laydate', 'element', 'layer', 'upload'], function(){
var form = layui.form,
layer = layui.layer,
element = layui.element,
upload = layui.upload;
laydate = layui.laydate;
//普通图片上传
var uploadInst = upload.render({
elem: '#img'
, url: '/apiCommon/setImage'
, field: 'layuiFile'
, before: function (obj) {
//预读本地文件示例，不支持ie8
obj.preview(function (index, file, result, data) {
$('#demo1').css('display','block').attr('src', result); //链接（base64）
});
}
, done: function (res) {
//如果上传失败
if (res.code > 0) {
return layer.msg('上传失败');
}
//上传成功
if(res.code == 0){
$('#imgurl').val(res.data.src);
}
}
, error: function () {
//演示失败状态，并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
});
});
</script>
```
4. 最终样式
#### 反馈交流QQ群：696279396
#### 赞助
