溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

layui 實現表單和文件上傳一起傳到后臺的例子

發布時間:2020-08-25 15:19:07 來源:腳本之家 閱讀:348 作者:成長中de大神 欄目:web開發

HTML代碼

<form class="layui-form">
  <div class="layui-form-item">
    <label class="layui-form-label">尾燈名稱</label>
    <div class="layui-input-block">
      <input type="text" name="name" required lay-verify="required" placeholder="請輸入尾燈名稱" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="button" class="layui-btn" id="upload">
        <i class="layui-icon">&#xe67c;</i>上傳圖標
      </button>
      <br><br>
      <div >
        <img  id="preview">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" id="commit" onclick="return false">立即提交</button>
    </div>
  </div>
</form>

JavaScript代碼

<script>
  layui.use(['form', 'layer', 'upload'], function () {
    var layer = layui.layer;
    var upload = layui.upload;
    var $ = layui.jquery;

    upload.render({
      elem: '#upload',
      url: '{:U("addTL")}',
      auto: false,//選擇文件后不自動上傳
      bindAction: '#commit',
      //上傳前的回調
      before: function () {
        this.data = {
          name: $('input[name="name"]').val()
        }
      },
      //選擇文件后的回調
      choose: function (obj) {
        obj.preview(function (index, file, result) {
          $('#preview').attr('src', result);
        })
      },
      //操作成功的回調
      done: function (res, index, upload) {
        var code = res.code === 0 ? 1 : 2;
        layer.alert(res.msg, {icon: code}, function () {
          parent.window.location.reload();
        })
      },
      //上傳錯誤回調
      error: function (index, upload) {
        layer.alert('上傳失??!' + index);
      }
    });
  })
</script>

以上這篇layui 實現表單和文件上傳一起傳到后臺的例子就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女