layui 富文本图片上传接口与普通按钮 文件上传接口

富文本-图片上传

html:

<div class="layui-form-item layui-form-text">
     <div class="layui-input-block">
         <!--<textarea id="L_content" name="contents" required lay-verify="required" placeholder="详细描述" class="layui-textarea fly-editor" style="height: 260px;"></textarea>-->
          <textarea id="L_content" name="contents"  placeholder="详细描述" style="display: none;"></textarea>
      </div>
</div>

js:记得之前引入layui.js

<script>
    layui.use('layedit', function(){
        var layedit = layui.layedit;
        layedit.set({
            uploadImage: {
                url: '{:url("index/index/lay_img_upload")}', //接口url
                type: 'post' //
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui 的多图片上传组件支持与后端接口进行对接,具体实现方法如下: 1. 在前端页面中引入 layui 的上传组件: ```html <link rel="stylesheet" href="/layui/css/layui.css"> <script src="/layui/layui.js"></script> ``` 2. 在页面中创建上传组件的 HTML 结构: ```html <div class="layui-upload"> <button type="button" class="layui-btn" id="upload">选择图片</button> <div class="layui-upload-list"> <table class="layui-table"> <thead> <tr> <th>文件名</th> <th>大小</th> <th>状态</th> <th>操作</th> </tr> </thead> <tbody id="uploadList"></tbody> </table> </div> <button type="button" class="layui-btn" id="uploadBtn">开始上传</button> </div> ``` 3. 在 JavaScript 中初始化上传组件,并设置对接的后端接口: ```javascript layui.use('upload', function(){ var upload = layui.upload; //执行实例 var uploadInst = upload.render({ elem: '#upload', //绑定元素 url: '/upload', //上传接口 multiple: true, //支持多文件上传 auto: false, //不自动上传 acceptMime: 'image/*', //图片文件 choose: function(obj){ //选择文件后的回调函数 //将文件列表渲染到页面中 var files = obj.pushFile(); $('#uploadList').html(''); layui.each(files, function(index, file){ $('#uploadList').append('<tr id="' + file.id + '"><td>' + file.name + '</td><td>' + (file.size/1024).toFixed(1) + 'KB</td><td>等待上传</td><td><button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button></td></tr>'); }); }, done: function(res, index, upload){ //上传完成的回调函数 layui.each(uploadInst.elem.next().find('input'), function(){ $(this).val(''); }); $('#uploadList').find('tr').remove(); if(res.code == 0){ //上传成功 }else{ //上传失败 } }, error: function(index, upload){ //上传出错的回调函数 layui.each(uploadInst.elem.next().find('input'), function(){ $(this).val(''); }); $('#uploadList').find('tr').remove(); } }); }); ``` 4. 在后端接口中处理上传的图片,并返回上传结果: ```php <?php if($_FILES){ $file = $_FILES['file']; $tempPath = $file['tmp_name']; $targetPath = 'uploads/' . $file['name']; move_uploaded_file($tempPath, $targetPath); echo json_encode(array('code' => 0, 'msg' => '上传成功')); }else{ echo json_encode(array('code' => 1, 'msg' => '上传失败')); } ?> ``` 以上是一个简单的多图片上传的实现过程,你可以根据自己的需求进行修改和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值