浅谈layui文件上传、预览及修改 |
您所在的位置：网站首页 › layui中文文档 › 浅谈layui文件上传、预览及修改 |
浅谈layui文件上传、预览及修改
|
本篇文章和大家浅谈一下layui文件单文件和多文件的上传、预览以及删除和修改。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
单文件上传 1、HTML 上传客服二维码 *2、js部分 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,宽450px2、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 |
【本文地址】