layui 点击头像上传头像

在开发过成中,难免是会要接触到图片上传后实现即时预览的,但是说实话,这样实现起来不使用插件的话,代码量还是有一点点的,
所以今天就推荐使用layui 来实现图片的上传功能,非常简单和适用,废话不多说贴出代码来

#代码部分

<html>
<head><title>layui 点击上传图片</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="//layui.hcwl520.com.cn/layui/css/layui.css?v=201801090202"/><script src="//layui.hcwl520.com.cn/layui/layui.js?v=201801090202"></script>
</head>
<body>
<div><div class="layui-form-item"><label class="layui-form-label">上传头像</label><div class="layui-input-inline"><div class="layui-upload"><input type="hidden" name="logo" value="" id="logo"><div class="layui-upload-list"><img class="layui-upload-img" id="demo1" width="80px" height="80px"><p id="demoText"></p></div></div></div></div>
</div>
</body>
<script>var myVarate = 'https://www.baidu.com/img/bd_logo.png';layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function () {var layer = layui.layer, upload = layui.upload, $ = layui.$, demoText = $('#demoText');$('#demo1').attr('src', myVarate);//页面初始化的时候渲染图片//普通图片上传var uploadInst = upload.render({elem: '#demo1',url: 'http://bolg.lengff.xyz/test',//这里填写你的上传地址accept: 'images',method: 'post',acceptMime: 'image/*', before: function (obj) {/*如果您不想用上面的URL 进行上传,也可以在这里,添加你的上传方式*/obj.preview(function (index, file, result) {$('#demo1').attr('src', result);//图片链接（base64）});}, done: function (res) {if (res.code == 200) {//长传成功(具体返回code 看后台是怎么处理的)return layer.msg('上传失败');demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');} else {layer.msg('图片上传成功!');}}, error: function () {demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');}});//上传失败监听重试按钮的操作demoText.find('.demo-reload').on('click', function () {uploadInst.upload();});});
</script>
</html>

#说明
具体的实现原理其实很简单,就是依赖layui的文件上传工具
#效果图点我查看

#尾巴没有尾巴

layui 点击头像上传头像相关推荐

jQuery点击头像上传头像图片并预览图片
HTML代码 <div class="img_show img_show1"> <img src="img2/img06.jpg&quo ...
layui文件上传(头像上传)
头像上传头像上传大概流程就是选择电脑上的文件图片然后上传到服务器服务器存起来然后上传到浏览器中,服务器需要用到磁盘存储模块(multer),需要下载安装 multer是Nodejs中用于处理文件上传 ...
php上传头像的代码,php头像上传预览实例代码
说道上传图片,大家并不陌生,不过,在以后开发的项目中,可能并不会让你使用提交刷新页面式的上传图片,比如上传头像,按照常理,肯定是在相册选择照片之后,确认上传,而肯定不会通过form表单,点击submi ...
完整的前后端实现上传头像、压缩头像
本文是我在写上传头像功能后的一个详细的总结,用作以后可以回顾,可能较为繁琐,如果明白上传只想看压缩,可直接拉到文章后半部分. 文章目录上传头像上传头像准备工作上传头像上传头像路由配置上传头像 ...
java 上传头像_javaWeb头像上传功能
[实例简介] 一个实现可抓取编辑,头像上传功能.只要下载就可以运行,附有源码 [实例截图] [核心代码] 头像上传 └── 头像上传 └── ZoomImageDemo ├── src │ └── ...
易语言POST教程-CSDN上传头像解析
这期给大家做个CSDN上传头像的一个文本教程解析: CSDN上传头像有三步: 1.登陆CSDN博客 CSDN登陆采用的是HTTPS的GET方式登陆: https://p ...
上传头像，layui上传图片
layui上传与bootstrap上传相似,只是不需要下插件, layui自带的已够用先看一下前台界面,这里是用到的上传头像先点击开始上传,头像上传至服务器中, 返回json添加至form表单中, ...
Tornado+Layui（九）Tornado+Layui 前后端分离头像上传
目的:添加人员信息和头像同时上传过程: 1.Layui头像界面 <!DOCTYPE html> <html> <head><meta charset=&qu ...
html 头像选择,html5点击上传头像选取本地图片上传代码
特效描述:html5 点击上传头像选取本地图片上传代码.html5点击上传头像,图片上传代码代码结构 1. HTML代码上传头像 //获取上传按钮 var input1 = document. ...
antd mobile ImagePicker实现点击头像上传
另类方法处理点击头像进行上传:将设置为绝对定位并且设为透明图层覆盖在显示的头像图片上,点击正常上传 html: const renderAvatar=()=>{if(avatar){return ...

layui 点击头像上传头像

layui 点击头像上传头像相关推荐

最新文章

热门文章

layui 点击头像 上传头像

layui 点击头像 上传头像相关推荐

最新文章

热门文章

layui 点击头像上传头像

layui 点击头像上传头像相关推荐