layui如何实现图片的上传以及图片预览（纯代码）

来源：吉趣旅游网

本篇文章给大家带来的内容是关于layui如何实现图片的上传以及图片预览（纯代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

1.选择文件后自动上传

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" href="../../layui/css/layui.css"/>
 </head>
 <body>
 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
 <legend>常规使用：普通图片上传</legend>
 </fieldset>
 
 <div class="layui-upload">
 <button type="button" class="layui-btn" id="test1">上传图片</button>
 <div class="layui-upload-list">
 <!--预览图片-->
 <img class="layui-upload-img" id="demo1">
 <!--提示上传信息-->
 <p id="demoText"></p>
 </div>
 </div> 
 
 <script type="text/javascript" src="../../layui/layui.js"></script>
 <script>
 layui.use(['upload','jquery'], function(){
 var $ = layui.$,
 upload = layui.upload;
 
 //普通图片上传
 var uploadInst = upload.render({
 elem: '#test1'
 ,url: '/upload/'
 ,before: function(obj){//文件上传前的回调
 //预读本地文件示例，不支持ie8
 obj.preview(function(index, file, result){
 $('#demo1').attr('src', result); //图片链接（base）直接将图片地址赋值给img的src属性
 });
 }
 ,done: function(res){
 //如果上传失败
 if(res.code > 0){
 return layer.msg('上传失败');
 }
 //上传成功
 }
 ,error: function(){
 //演示失败状态，并实现重传
 var demoText = $('#demoText');
 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>
 </body>
</html>

图片预览实现，在选择文件后的回调和图片上传前的回调都可以实现：

obj.preview(function(index, file, result){
 //index表示文件索引
 //file表示文件信息
 //result表示文件src地址
	 $('#demo1').attr('src', result); //图片链接（base）直接将图片地址赋值给img的src属性
	 });

点击上传图片后，选择图片，直接上传：

2.选择文件后不自动上传，通过按钮触发上传

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="../../layui/css/layui.css"/>
	</head>
	<body>
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
	 <legend>常规使用：普通图片上传</legend>
	</fieldset>
	 
	<p class="layui-upload">
	 <button type="button" class="layui-btn" id="choose">选择文件</button>
	 <p class="layui-upload-list">
	 	<!--预览图片-->
	 <img class="layui-upload-img" id="demo1">
	 <!--提示上传信息-->
	 <p id="demoText"></p>
	 </p>
	 <button type="button" class="layui-btn" id="load">上传</button>
	</p> 
	
	<script type="text/javascript" src="../../layui/layui.js"></script>
	<script>
	layui.use(['upload','jquery'], function(){
	var $ = layui.$,
	upload = layui.upload;
	
	 //普通图片上传
	 var uploadInst = upload.render({
	 elem: '#choose'//选择文件的DOM对象
	 ,auto: false //选择文件后不自动上传
	 ,bindAction: '#load' //指向一个按钮触发上传
	 ,url: '/upload/'
	 ,choose:function(obj){//选择文件的回调，obj为选中的文件
	 	//将每次选择的文件追加到文件队列
 	var files = obj.pushFile();
 	
 	//预览选中的文件（本地文件）
 	obj.preview(function(index,file,result){
 	 $('#demo1').attr('src', result); 
 	});
	 }
	 ,before: function(obj){//文件上传前的回调
	 
	 }
	 ,done: function(res){
	 //如果上传失败
	 if(res.code > 0){
	 return layer.msg('上传失败');
	 }
	 //上传成功
	 }
	 ,error: function(){
	 //演示失败状态，并实现重传
	 var demoText = $('#demoText');
	 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>
	</body>
</html>

点击选择文件后，选择图片，选中的图片能展示出来预览，再点击上传，即将图片上传：