发布时间:2020-03-20 16:59:19 作者:佚名 阅读:(1988)
最近在使用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"></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多图片上传并预览的方法,了解更多相关文章请关注吾爱编程网!
欢迎分享转载→ layui多图片上传并预览
© 2015-2021 - 吾爱编程网 版权所有 苏ICP备18033726号-1关于我们 - 网站声明 - 联系我们 - 意见反馈