# 注意：本文檔后期不在跟新，新文檔遷移到：[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
#### 贊助
