快捷導(dǎo)航

layui 實(shí)現(xiàn)表單和文件上傳一起傳到后臺(tái)的例子

更新時(shí)間：2019年09月16日 11:40:48 作者：成長(zhǎng)中de大神

今天小編就為大家分享一篇layui 實(shí)現(xiàn)表單和文件上傳一起傳到后臺(tái)的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

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="請(qǐng)輸入尾燈名稱" 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>上傳圖標(biāo)
      </button>
      <br><br>
      <div style="width:200px;height:200px;border:3px solid #0099CC;border-radius: 5px;padding: 3px;">
        <img style="max-width: 200px;max-height:200px;" 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,//選擇文件后不自動(dòng)上傳
      bindAction: '#commit',
      //上傳前的回調(diào)
      before: function () {
        this.data = {
          name: $('input[name="name"]').val()
        }
      },
      //選擇文件后的回調(diào)
      choose: function (obj) {
        obj.preview(function (index, file, result) {
          $('#preview').attr('src', result);
        })
      },
      //操作成功的回調(diào)
      done: function (res, index, upload) {
        var code = res.code === 0 ? 1 : 2;
        layer.alert(res.msg, {icon: code}, function () {
          parent.window.location.reload();
        })
      },
      //上傳錯(cuò)誤回調(diào)
      error: function (index, upload) {
        layer.alert('上傳失??！' + index);
      }
    });
  })
</script>

以上這篇layui 實(shí)現(xiàn)表單和文件上傳一起傳到后臺(tái)的例子就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript的concat方法實(shí)例代碼(數(shù)組連接)
這篇文章主要介紹了JavaScript的concat方法實(shí)例代碼，包括數(shù)組連與字符連接,需要的朋友可以參考下
2023-03-03
JS正則表達(dá)式驗(yàn)證數(shù)字代碼
本篇文章主要是對(duì)JS正則表達(dá)式驗(yàn)證數(shù)字的代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-01-01
JavaScript中常見的Polyfill介紹
在多姿多彩的JavaScript世界,Polyfill如同一座架在瀏覽器兼容性鴻溝之上的橋梁,本文將介紹常見的JavaScript Polyfill兼容方案,并舉例說(shuō)明它們的應(yīng)用,需要的可以參考下
2023-12-12
JavaScript判斷變量是否為數(shù)組的方法(Array)
這篇文章主要介紹了JavaScript判斷變量是否為數(shù)組的方法(Array),涉及到j(luò)avascript 數(shù)組變量相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧
2016-02-02
使用原生的javascript來(lái)實(shí)現(xiàn)輪播圖
這篇文章主要介紹了使用原生的javascript來(lái)實(shí)現(xiàn)輪播圖,在代碼底部給大家補(bǔ)充了原生javascript實(shí)現(xiàn)banner圖自動(dòng)輪播切換，需要的朋友可以參考下
2017-02-02
JavaScript 實(shí)現(xiàn)生命游戲
這篇文章主要介紹了JavaScript 實(shí)現(xiàn)生命游戲的示例步驟，幫助大家更好的理解和學(xué)習(xí)使用JavaScript，感興趣的朋友可以了解下
2021-04-04
Javascript實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-11-11
javascript實(shí)現(xiàn)簡(jiǎn)單搜索功能
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡(jiǎn)單搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03
js跑步算法的實(shí)現(xiàn)代碼
這篇文章主要是對(duì)js跑步算法的實(shí)現(xiàn)代碼進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
前端判斷頁(yè)面是在PC端還是移動(dòng)端打開四種方法
本文介紹幾種在前端開發(fā)中用于判斷用戶設(shè)備類型（PC端或移動(dòng)端）的方法,包括使用navigator.userAgent、媒體查詢、第三方庫(kù)detect.js和Vue框架插件vue-device-detect,這些方法有助于在開發(fā)中處理設(shè)備適配和頁(yè)面權(quán)限問(wèn)題,需要的朋友可以參考下
2024-10-10