欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2019年09月16日 11:40:48   作者:成長中de大神  
今天小編就為大家分享一篇layui 實現(xiàn)表單和文件上傳一起傳到后臺的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

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 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,//選擇文件后不自動上傳
      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 實現(xiàn)表單和文件上傳一起傳到后臺的例子就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

  • 利用JS實現(xiàn)獲取當前系統(tǒng)電量情況

    利用JS實現(xiàn)獲取當前系統(tǒng)電量情況

    在前端瀏覽器中我們可以通過使用JavaScript的navigator.getBattery()方法來獲取當前系統(tǒng)的電池情況,本文將介紹如何使用這個API以及它在實際應用中的使用,需要的可以參考下
    2023-12-12
  • javascript解決innerText瀏覽器兼容問題思路代碼

    javascript解決innerText瀏覽器兼容問題思路代碼

    innerText瀏覽器兼容這塊始終都是一個問題,下面與大家分享下使用javascript解決,感興趣的朋友可以參考下哈,希望對你有所幫助
    2013-05-05
  • javascript跨瀏覽器的屬性判斷方法

    javascript跨瀏覽器的屬性判斷方法

    這篇文章主要介紹了javascript跨瀏覽器的屬性判斷的方法,需要的朋友可以參考下
    2014-03-03
  • 淺談JavaScript中的防抖和節(jié)流

    淺談JavaScript中的防抖和節(jié)流

    防抖和節(jié)流函數(shù)是工作中兩種常用的前端性能優(yōu)化函數(shù),今天我就來總結一下什么是防抖和節(jié)流,并詳細說明一下如何在工作中應用防抖和節(jié)流函數(shù),需要的朋友可以參考下
    2023-08-08
  • JavaScript操作URL的相關內容集錦

    JavaScript操作URL的相關內容集錦

    這篇文章主要介紹了JavaScript操作URL的相關內容集錦的相關資料,需要的朋友可以參考下
    2015-10-10
  • javascript中對變量類型的判斷方法

    javascript中對變量類型的判斷方法

    在JavaScript中,有5種基本數(shù)據(jù)類型和1種復雜數(shù)據(jù)類型,基本數(shù)據(jù)類型有:Undefined, Null, Boolean, Number和String;復雜數(shù)據(jù)類型是Object,Object中還細分了很多具體的類型,比如:Array, Function, Date等等
    2015-08-08
  • webpack 模塊熱替換原理

    webpack 模塊熱替換原理

    這篇文章主要介紹了webpack 模塊熱替換原理,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • js實現(xiàn)公告自動滾動

    js實現(xiàn)公告自動滾動

    這篇文章主要為大家詳細介紹了js實現(xiàn)公告自動滾動,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-05-05
  • 微信JS SDK接入的幾點注意事項(必看篇)

    微信JS SDK接入的幾點注意事項(必看篇)

    下面小編就為大家?guī)硪黄⑿臞S SDK接入的幾點注意事項(必看篇)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-06-06
  • JavaScript實現(xiàn)獲取遠程的html到當前頁面中

    JavaScript實現(xiàn)獲取遠程的html到當前頁面中

    今天做個項目,需要在當前的html頁面中引用一個遠程的html頁面,百度了一下,發(fā)現(xiàn)一個非常好用的代碼,這里分享給大家,有相同需求的小伙伴可以來看看
    2017-03-03

最新評論