当前位置:首页 > 网页设计 >HTML >

layui多图片上传并预览

发布时间:2019-06-29 12:21:28 作者:佚名 阅读:(344)

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

<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>
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多图片上传并预览

© 2015-2019 - 吾爱编程网 版权所有 苏ICP备18033726号-1关于我们 - 网站声明 - 联系我们