layui上传图片并进行图片预览

最新推荐文章于 2024-05-25 22:39:08 发布

春雨与秋风

最新推荐文章于 2024-05-25 22:39:08 发布

阅读量476

点赞数 1

本文链接：https://blog.csdn.net/HouseLizard/article/details/106501813

版权

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../../resources/layui/css/layui.css" media="all">
</head>
<style type="text/css">
	#tupian{
		padding-top: 0px;
		    padding-left: 0px;
		    padding-bottom: 0px;
		    padding-right: 0px;
	}
</style>
<body>

<div class="layui-upload">
  
  <div class="layui-upload-list">
    <img class="layui-upload-img" id="demo1" width="100px" height="100px" onclick="openImg('demo1')" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591092594611&di=66178f217e5e9fd099e4dca5e4b054cb&imgtype=0&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D4233057963%2C2452252953%26fm%3D214%26gp%3D0.jpg">
    <p id="demoText"></p>
  </div>
  <button type="button" id="test1">更换图片</button>
</div>   
<script type="text/javascript" src="../../../resources/layui/layui.all.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../resources/js/jquery-1.11.3.min.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use('upload', function(){
	var $ = layui.jquery,
	upload = layui.upload;

	//普通图片上传
	var uploadInst = upload.render({
		elem: '#test1'
		,url: 'https://httpbin.org/post' //改成您自己的上传接口
		,before: function(obj){
		  //预读本地文件示例，不支持ie8
		  obj.preview(function(index, file, result){
			$('#demo1').attr('src', result); //图片链接（base64）
		  });
		}
		,done: function(res){
		  //如果上传失败
		  if(res.code > 0){
			return layer.msg('上传失败');
		  }
		  //上传成功
		}
		,error: function(){
		  //演示失败状态，并实现重传
		  var demoText = $('#demoText');
		  demoText.html('<span style="color: #FF5722;">上传失败</span>');
		  //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();
		  });
		}
	});  
});

var closeImg;
//预览放大图片
function openImg(id){
	
	//获取头像地址
	var src=$("#demo1").attr("src");
	closeImg=layer.msg(
		"<img src='"+src+"'  width='100%' height='100%' onclick=closeImg2()>",{
			id:'tupian',
			time :0,
			area: ['auto', 'auto'],
			shade :0.3,//d打开遮罩
			shadeClose:true,//点击遮罩关闭
			anim: 5//出现的动漫效果
		}
	);
}

//关闭图片
function closeImg2(){
	if(closeImg!=null){
		layer.close(closeImg);
	}
}
</script>
</body>
</html>

春雨与秋风

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
layui上传图片并进行图片预览

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewp.
复制链接

扫一扫