本篇文章给大家带来的内容是关于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); //图片链接(base64)直接将图片地址赋值给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); //图片链接(base64)直接将图片地址赋值给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>
点击选择文件后,选择图片,选中的图片能展示出来预览,再点击上传,即将图片上传:
相关推荐:
js如何来导出以及导入excel?js导入导出excel的方法(纯代码)
以上是layui如何实现图片的上传以及图片预览(纯代码)的详细内容。更多信息请关注PHP中文网其他相关文章!