Node項目之需求收集平臺（二）- 上傳插件使用

時間 2019-12-13

原文原文鏈接

該項目前臺表單上使用的是bootstrap-fileinput的樣式，bootstrap-fileinput是挺強大的一個文件上傳插件，注意是文件上傳，不單單只是針對圖片上傳，初次接觸它光是調成本身想要的樣式也是花了半天時間呢，下面簡單介紹一下需求收集平臺這個項目使用的這個插件一些細節問題。javascript

對了，別忘了詳細看下官方說明文檔：Bootstrap File Input - © Kartik，英文的，看着頭疼也要看下去。css

1. 提交模式

首先文檔簡要對比了一下兩種上傳模式，一是表單方式提交，一是Ajax方式提交。從下圖能夠看出官方顯然是推薦你使用Ajax方式上傳的，很明顯使用Ajax方式上傳更加自由，而且能獲取更多的功能。html

2. 導入文件

而後須要導入必要的CSS以及JS文件，如下這些是必需要導入的，別調試了半天才發現插件都沒有導入就搞笑了。java

bootstrap.cssjquery
bootstrap.jsbootstrap
jquery.js學習
bootstrap-fileinput/css/fileinput.cssspa
bootstrap-fileinput/js/fileinput.js插件
bootstrap-fileinput/js/locales/zh.js （中文語言文件，可選擇是否導入）調試

本身對號入座，尋找對應的文件，以上6個必需要導入，bootstrap-fileinput/js/plugins/目錄裏還有一些插件視具體實現的功能導入。

3. 基本使用

接下來就是插件的使用了，起初我就是爲了改善一下file類型的表單的樣式，默認的文件上傳樣式實在不忍直視。

在不引入bootstrap-fileinput插件相關文件的時候，以下html代碼：

<form method="POST" action="#">
    <div class="form-group">
        <label for="file">文件輸入</label>
        <input type="file" name="file" id='myfile'>
    </div>
    <input type="submit" name="submit" value='提交' class="btn btn-primary">
</form>

顯示的效果是這樣的：

在引入bootstrap-fileinput插件後，一樣的html代碼，顯示效果是這樣的：

引入基本文件後，在頁面底端添加一行js代碼$('#myfile').fileinput();，就能出現不同的效果。完整的HTML代碼以下：

<!DOCTYPE html>
<html>
<head>
  <title>fileinput-example</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="css/fileinput.css">
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/bootstrap.js"></script>
  <script type="text/javascript" src="js/fileinput.js"></script>
  <script type="text/javascript" src="js/zh.js"></script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-6">
        <h1>fileinput-example</h1>
        <form method="POST" action="#">
          <div class="form-group">
            <label for="file">文件輸入</label>
            <input type="file" name="file" id='myfile'>
          </div>
          <input type="submit" name="submit" value='提交' class="btn btn-primary">
        </form>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    $('#myfile').fileinput();
  </script>
</body>
</html>

接下來，上傳幾個文件試試默認的樣式是啥樣。

上傳一個圖片試試
上傳一個文件試試

看起來是否是還能夠，該項目最終顯示成以下樣子：

功能上作了一些限制，好比容許上傳多張照片，但只容許上傳3張，每一個照片最大隻能是1MB。要想實現一些控制，那麼就要了解下面的一些參數。

4. 控制參數

在官方的說明文檔裏都有介紹，可是不少狀況，雖然有說明但也不必定能看懂，對於該插件的功能我也不併非很熟悉，我只是實現了我想要的效果，有興趣的能夠自行學習。

下面是該項目中配置的一些參數：

$("#input-id").fileinput({
    showUpload: false,
    previewFileType: 'any',
    language: 'zh',
    browseLabel: '圖片多選',
    browseClass: 'btn btn-default',
    allowedFileTypes: ['image'], // 限制文件類型爲圖片
    allowedFileExtensions: ['jpg', 'png'], // 限制文件後綴名爲jpg,png,gif
    maxFileCount: 3,  // 限制最多3張圖片
    maxFileSize: 1024, // 限制圖片大小，最大1024KB
    allowedPreviewTypes: ['image'], // 容許預覽的文件類型
    initialCaption: '能夠選擇最多3張圖片，格式爲png或者jpg，大小不超過1M', // 初始化說明框框，好比該項目上默認顯示：能夠選擇最多3張圖片，格式爲png或者jpg，大小不超過1M
    layoutTemplates: {
      main1: '{preview}\n' +
      '<div class="input-group {class}">\n' +
      '   <div class="input-group-btn">\n' +
      '       {browse}\n' +
      '       {remove}\n' +
      '   </div>\n' +
      '   {caption}\n' +
      '</div>',
      footer: '<div class="file-thumbnail-footer">\n' +
      '    <div class="file-caption-name">{caption}{size}</div>\n' +
      '</div>'
    }
  }); // 修改默認樣式，好比按鈕移到左側，預覽窗口中圖片的腳標等等（這裏只顯示文件名，以下圖）

這裏只是簡單介紹了一下bootstrap-fileinput插件的簡單功能，更多功能的學習仍是要靠本身的研究，特別是Ajax上傳功能。做者研究深度有限，暫不作過多介紹了，有機會的話，再作深刻學習並分享。