layui文件上传、预览及修改方法

 
  上传客服二维码*  
  
 
 开始上传 
 
温馨提示: 每次最多上传一张图片, 单张图片的大小不超过2MB
 
  

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(); }); } }); });

 
  上传商铺图片*  
 
 
 
 
图片预览
 
大小
 
状态
 
操作
 
 
 
 
 
 开始上传 
温馨提示: 每次最多上传六张图片, 单张图片的大小不超过5MB, 长宽比例推荐1.5:1, 推荐上传图片长675px,宽450px 
 
  

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 = $(['' , '' , '' + (file.size / 1014).toFixed(1) + 'kb' , '等待上传' , '' , '重传' , '删除' , '' , ''].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'); //显示重传 } }); });

         
  
 
 
 
 
 商铺名称* 
  
 
 
 
 
 
 
 商铺编号 
  
 
 
 
 
 
 
 详细地址* 
  
 
 
 
 
 
 
 联系方式* 
  
 
 
 
 
 
 
 
 
  上传客服二维码*  
  
 
 开始上传 
 
温馨提示: 每次最多上传一张图片, 单张图片的大小不超过2MB
 
  
 
 
 
 
 
 
 
 
  上传商铺图片*  
 
 
 
 
图片预览
 
大小
 
状态
 
操作
 
 
 
 
 
 开始上传 
温馨提示: 每次最多上传六张图片, 单张图片的大小不超过5MB, 长宽比例推荐1.5:1, 推荐上传图片长675px,宽450px 
 
  
 
 
 
 
 
 
 确认保存 
 
 
 
 
    

         
  
 
  
 
 
 商铺名称 
  
 
 
 
 
 
 
 商铺编号 
  
 
 
 
 
 
 
 详细地址 
  
 
 
 
 
 
 
 联系方式 
  
 
 
 
 
 
 
 
 
 
  
 
 
  修改客服二维码  
 
 开始上传  
 
 
温馨提示: 每次最多上传一张图片, 单张图片的大小不超过2MB
 
   
 
 
 
 
 
 
 
 
 
 
 
 
图片预览
 
状态
 
操作
 
 
 
 
 
 
 
  添加商铺图片  
 
  开始上传  
 
 
温馨提示: 每次最多上传六张图片, 单张图片的大小不超过5MB, 长宽比例推荐1.5:1, 推荐上传图片长675px,宽450px 
 
   
 
 
 
 
 
 确认保存