01<div class="form-group">
02<label for="mobile">头 像</label>
03<div>
04<input type="text" name="ico" id="ico" placeholder="请上传缩略图" class="layui-input">
05<button type="button" class="layui-btn upload" data-des="ico">
06<i class="layui-icon"></i>上传图片
07</button>
08<div id="ico_box"></div>
09</div>
10</div>
11
12<script>
13layui.use([element,upload], function(){
14var element = layui.element;
15var upload = layui.upload;
16
17//执行单图片实例
18var uploadInst = upload.render({
19elem: .upload //绑定元素
20,url: /index.php?p=/index/upload //上传接口
21,field: upload //字段名称
22,multiple: false //多文件上传
23,accept: images //接收文件类型 images（图片）、file（所有文件）、video（视频）、audio（音频）
24,acceptMime: image/*
25,done: function(res){
26var item = this.item;
27layer.closeAll(loading); //关闭loading
28if(res.code==1){
29$(#ico).val(res.data[0]);
30$(#ico_box).html("<img src="+res.data[0]+" width=80 >");
31layer.msg(上传成功！);
32}else{
33layer.msg(上传失败：+res.data);
34}
35}
36,error: function(){
37layer.closeAll(loading); //关闭loading
38layer.msg(上传发生错误!);
39}
40});
41});
42</script>
注意：前端上传功能会影响网站的安全性，容易导致网站被入侵，如非必须情况不建议使用此功能。
