layui如何对上传文件进行操作
本篇文章展示了layui对上传文件的操作,代码简明扼要容易理解,如果在日常工作遇到这个疑问。希望大家通过这篇文章,找到解决疑问的办法。
网站建设哪家好,找创新互联建站!专注于网页设计、网站建设、微信开发、重庆小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了屏南免费建站欢迎大家使用!
单文件上传
1、HTML
温馨提示: 每次最多上传一张图片, 单张图片的大小不超过2MB
2、js部分
layui.use(['form', 'element', 'upload'], function () { var form = layui.form; var element = layui.element; var $ = layui.jquery; var upload = layui.upload; //单文件示例 选完文件后不自动上传 var uploadSingle = upload.render({ elem: '#uploadQR' , url: '/web/api/upload/upload?option=4' , accept: 'images' // 允许上传的文件类型 , size: 2048 // 最大允许上传的文件大小 单位 KB , auto: false , bindAction: '#startUploadQR' , choose: function (obj) { //预读本地文件示例,不支持ie8 obj.preview(function (index, file, result) { $('#qrshow').attr('src', result); //图片链接(base64) }); } , done: function (res, index, upload) { if (res.code == 0) { //上传成功 $("#qrInput").val(res.data[0].fp_relative); var startDiv = $('#startDiv'); startDiv.html('上传成功'); } else { this.error(index, upload); } } , error: function (index, upload) { //演示失败状态,并实现重传 var startDiv = $('#startDiv'); startDiv.html('上传失败 重试'); startDiv.find('.demo-reload').on('click', function () { uploadSingle.upload(); }); } }); });
多图片的上传
1、HTML
图片预览 大小 状态 操作 温馨提示: 每次最多上传六张图片, 单张图片的大小不超过5MB, 长宽比例推荐1.5:1, 推荐上传图片长675px,宽450px
2、js部分
layui.use(['table', 'form', 'element', 'upload'], function () { var table = layui.table; var form = layui.form; var element = layui.element; var $ = layui.jquery; var upload = layui.upload; //多文件列表示例 var demoListView = $('#imgList'); var totalArray = new Array(); var uploadInst = upload.render({ elem: '#upload' //绑定元素 , url: '/web/api/upload/upload?option=3' //上传接口 , accept: 'images' // 允许上传的文件类型 // , acceptMime: 'image/jpg,image/png' // (只支持jpg和png格式,多个用逗号隔开), , size: 5120 // 最大允许上传的文件大小 单位 KB , auto: false //选择文件后不自动上传 , bindAction: '#startUpload' //指向一个按钮触发上传 , multiple: true // 开启多文件上传 , number: 6 // 同时上传文件的最大个数 , choose: function (obj) { var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列 var arr = Object.keys(files); totalArray = totalArray.concat(arr); // 检查上传文件的个数 if (totalArray.length <= 6) { //读取本地文件 obj.preview(function (index, file, result) { var tr = $(['' , ' '].join('')); //单个重传 tr.find('.demo-reload').on('click', function () { obj.upload(index, file); }); //删除 tr.find('.demo-delete').on('click', function () { delete files[index]; //删除对应的文件 tr.remove(); uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选 }); demoListView.append(tr); }); } else { // 超出上传最大文件 layer.msg("上传文件最大不超过6个") } } , done: function (res, index, upload) { console.log("res", res); if (res.code == 0) { //上传成功 // 上传成功后将图片路径拼接到input中,多个路径用","分割 var inputVal = document.getElementById("imgInput").value; var valData = ""; if (inputVal) { valData = inputVal + "," + res.data[0].fp_relative; } else { valData = res.data[0].fp_relative; } document.getElementById("imgInput").value = valData; var tr = demoListView.find('tr#upload-' + index) , tds = tr.children(); tds.eq(2).html('上传成功'); tds.eq(3).html(''); //清空操作 return delete this.files[index]; //删除文件队列已经上传成功的文件 } this.error(index, upload); } , error: function (index, upload) { var tr = demoListView.find('tr#upload-' + index) , tds = tr.children(); tds.eq(2).html('上传失败'); tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传 } }); });' , ' ' + (file.size / 1014).toFixed(1) + 'kb ' , '等待上传 ' , '' , '' , '' , ' ' , '
添加页面
添加商铺
编辑页面
编辑商铺
以上就是layui对上传文件的操作,详细使用情况还得要大家自己使用过才能知道具体要领。如果想阅读更多相关内容的文章,欢迎关注创新互联行业资讯频道!
新闻标题:layui如何对上传文件进行操作
文章源于:http://myzitong.com/article/gcsehp.html