layui多图片上传并预览

 最近在使用layui开发网站后台用到了多图片上传，我是结合thinkphp开发的，接下来吾爱编程就为大家介绍一下layui多图片上传并预览，有需要的小伙伴可以参考一下：

1、html代码：

<div class="layui-form-item">
    <label class="layui-form-label">相册</label>
    <div class="layui-form-mid layui-word-aux" style="padding-top: 0px !important; ">
      <button type="button" class="layui-btn layui-btn-small layui-btn-normal photosload" lay-data="{data:{type:'image'},accept:'images'}" data-name="photos">
        <i class="layui-icon">&#xe60d;</i>上传相册
      </button>
    </div>
  </div>
  <div class="layui-form-item">
      <div name="photos" id="PhotosDom"></div>
      <textarea name="img_jietu"  placeholder="请输入文章描述" autocomplete="off" class="layui-textarea" style="width: 40%" ></textarea>
  </div>

2、js相关代码：

upload.render({
  elem: '.photosload' //绑定元素
  ,url: '{:Url('common/fileupload',array('other'=>'newinfo'))}' //上传接口
  ,multiple: true  //多文件上传
  ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
    //console.log(obj);
    layer.load(); //上传loading
  }
  ,done: function(res,index){ 
      layer.closeAll('loading');
      if(res.status=='1'){
          var item = this.item;
          $("textarea[name='img_jietu']").append(res.path+'\r\n');
          var html='<img src="'+res.path+'" class="content-photos">';
          $("#PhotosDom").append(html);
      }else{
        alert("上传失败,请重试！");
      }
  }
  ,error: function(){
      layer.closeAll('loading');
      alert("上传失败,请重试！");
    //请求异常回调
  }
  ,field:'file' //字段名

});

以上就是吾爱编程为大家介绍的关于layui多图片上传并预览的方法，了解更多相关文章请关注吾爱编程网！