layui如何动态上传文件

HTML

<div class="layui-form-item od_customer_src">
  <label class="layui-form-label">COMlabel>
  <div class="layui-input-block">
    <div class="layui-upload">
      <div class="forms">
        <input type="file" name="file" id="comupload" value="">上传文件div>
      <div class="layui-upload-list upload-list" id="comlists">div>
    div>
  div>
div>

css

.forms {
     
    width: 92px;
    height: 38px;
    overflow: hidden;
    background: green;
    position: relative;
    background: #727cf5;
    background-size: 100% 100%;
    margin-right: 0.2rem;
    border-radius: 3px;
    text-align: center;
    line-height: 38px;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    margin-bottom: 10px;
}
.forms input {
     
    display: block;
    border: 0;
    border: none;
    position: absolute;
    height: 35px;
    outline: 0;
    opacity: 0;
}

JS

uploadFun = function(num) {
     
  upload.render({
     
      elem: '#test' + num,//动态改变的id
      url: '/index/develorderss/uploadattache',//后台接口
      done: function(res, index, upload) {
     
          $('#test' + num).prev('input').val(res['data']['source_name']);
          $('#test' + num).prev('input').prev('input').val(res['data'][1]);
          $("#test" + num).next('span').html(res['data']['source_name']);
      },
      accept: 'file'
  });
};

效果图

layui如何动态上传文件_第1张图片

你可能感兴趣的:(JS,layui,upload,js)