2. 程式人生 > >bootstrap 上傳圖片外掛 file-input 的簡單使用

bootstrap 上傳圖片外掛 file-input 的簡單使用

阿新 • • 發佈：2019-02-11

最近在寫自己的個人網站 ,前端使用的bootstrap框架 ,做到上傳圖片功能的時候網上找到一個基於bootstrap的圖片上傳框架 file-input  外掛, 這個外掛做的非常符合我的審美觀,所以簡單記錄一下這個外掛的使用方法

首先根據自己的專案路徑引入外掛css和js檔案

注意locale語言檔案在fileinput.min.js檔案之後引入

  1. <!-- file input -->
  2. <linkhref="../../css/fileinput.min.css"rel="stylesheet">
  3. <scriptsrc
    ="../../js/fileinput.min.js"></script>
  4. <scriptsrc="../../js/locales/zh.js"type="text/javascript"></script>


然後是html程式碼  因為我不是專業前端 所以前端程式碼寫的很爛 輕噴敲打  

  1. <!-- 模態框（Modal） -->
  2. <spanstyle="white-space:pre"></span><divclass="modal fade"id="myModal"tabindex
    ="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true">
  3. <spanstyle="white-space:pre"></span><divclass="modal-dialog">
  4. <spanstyle="white-space:pre"></span><divclass="modal-content">
  5. <spanstyle="white-space:pre"></span><divclass="modal-header"
    >
  6. <spanstyle="white-space:pre"></span><buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">
  7. <spanstyle="white-space:pre"></span>&times;  
  8. <spanstyle="white-space:pre"></span></button>
  9. <spanstyle="white-space:pre"></span><h3class="modal-title"id="myModalLabel"align="center">
  10. <spanstyle="white-space:pre"></span><b>新增曲譜資訊</b>
  11. <spanstyle="white-space:pre"></span></h3>
  12. <spanstyle="white-space:pre"></span></div>
  13. <spanstyle="white-space:pre"></span><divclass="modal-body">
  14. <spanstyle="white-space:pre"></span><formid="addForm"class="bs-example bs-example-form"role="form"enctype="multipart/form-data">
  15. <spanstyle="white-space:pre"></span><divclass="input-group"style="width: 566px;">
  16. <spanstyle="white-space:pre"></span><spanclass="input-group-addon">曲譜名稱</span>
  17. <spanstyle="white-space:pre"></span><inputtype="text"id="scoreName"name="scoreName"class="form-control"placeholder="">
  18. <spanstyle="white-space:pre"></span></div>
  19. <spanstyle="white-space:pre"></span><divclass="input-group col-lg-5"style="display: inline-table; margin-top: 10px;">
  20. <spanstyle="white-space:pre"></span><spanstyle="white-space:pre"></span><spanclass="input-group-addon">曲譜型別</span>
  21. <spanstyle="white-space:pre"></span><inputtype="text"id="type"name="type"class="form-control"><spanstyle="white-space:pre"></span>
  22. <spanstyle="white-space:pre"></span

    相關推薦

    bootstrap 上傳圖片外掛 file-input 的簡單使用

    最近在寫自己的個人網站 ,前端使用的bootstrap框架 ,做到上傳圖片功能的時候網上找到一個基於bootstrap的圖片上傳框架 file-input  外掛, 這個外掛做的非常符合我的審美觀,所以簡單記錄一下這個外掛的使用方法 首先根據自己的專案路徑引

    uploadify上傳圖片外掛的使用

    uploadify 是一款上傳圖片專用的外掛該外掛在頁面中只是一個按鈕，點選按鈕彈出檔案選擇框，選擇圖片後自動上傳到伺服器 1.http://www.uploadify.com/ 是其官網 下載可能需要錢 2.使用 在官網點選doc來到文件位置http://www.uploadify.com/docume

    ajax上傳圖片到服務器簡單操作

    鍵值 data gpo art 普通 alt 上傳 格式 ttr 前端： 通過Ajax方式上傳文件，使用FormData進行Ajax請求。上傳文件或圖片時，要求的格式為enctype ="multipart/form-data"(以二進制格式上傳)，在使用ajax上傳

    批量上傳圖片(jQuery-File-Upload使用)

    styles client lar new this thead alex pla multipl jQuery-File-Upload jQuery-File-Upload是一個jquery下的ajax文件上傳插件，支持批量上傳，github地址：https://gith

    對於處理上傳圖片新增水印的簡單操作

    圖片上傳之後的流程如下圖 　首先你的新增一個引用System.Drawing.dll 　前端只要有個圖片上傳功能就可以了 後臺程式碼也簡單，只需將圖片存起來，再呼叫 後言：水印原理很簡單，沒接觸過得可以自己去試一試，本部落格有不足之處，請大家多多包涵，謝謝

    簡易上傳圖片外掛

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-s

    WebUploader上傳圖片外掛

    WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代檔案上傳元件。在現代的瀏覽器裡面能充分發揮HTML5的優勢，同時又不摒棄主流IE瀏覽器，沿用原來的FLASH執行時，相容IE6+，iOS 6+, android

    tinymce編輯器上傳圖片外掛配置

    轉自：http://www.tangshuang.net/1715.html 使用tinymce作為網站的編輯器的時候，由於tinymce本身並不提供本地圖片上傳（提供付費圖片上傳外掛），所以我們需要自己去整合這個功能。但是我在網上找了很多資料，都沒有完整且有效的實現

    layui上傳圖片外掛

    最近在做一個多圖片上傳，並可點選預覽圖片和刪除圖片，看頁面效果 1. 2. 3.點選圖片x可進行刪除 4.上傳用的layui外掛，layui在專案中的具體使用 4.1進入相關檔案 4.2 4.3 4.4  layui.use('upload', function

    ajaxFileUpload.js上傳圖片外掛，全瀏覽器相容，規避json錯誤，帶檔案格式大小攔截

    直接上程式碼了  有不理解的可以評論區@我  一起討論。 /* 2017/04/17-zhaoyf-ajaxFileUpload.js 無重新整理上傳圖片 jquery 外掛，支援 ie6-ie11 依賴：jquery.js 主方法：ajaxFileUpload 接受

    Spring Boot使用FastDFS結合Dropzone.js Bootstrap上傳圖片

    緒論 dropzone.js是一個非常強大的圖片上傳外掛，而如今bootstrap的扁平化風格又如些的流行，當然也dropzone.js也有bootstrap風格的主題。本文主要講如何在spring boot中使用dropzone.js實現圖片上傳功能。先看看

    基於Metronic的Bootstrap開發框架經驗總結（5）--Bootstrap檔案上傳外掛File Input的使用

    Bootstrap檔案上傳外掛File Input是一個不錯的檔案上傳控制元件，但是搜尋使用到的案例不多，使用的時候，也是一步一個腳印一樣摸著石頭過河，這個控制元件在介面呈現上，叫我之前使用過的Uploadify 好看一些，功能也強大些，本文主要基於我自己的框架程式碼案例，介紹其中檔案上傳外掛File Inp

    前端實現input[type='file']上傳圖片預覽效果

    query selector indexof 圖片加載 code lock 復用 lec 應用 眾所周知JavaScript在設計上處於安全角度考慮，是不允許讀寫本地文件的（原因請自行百度）； 但是在實際項目應用中，經常會使用到上傳圖片，並且可以讓用戶直接預覽圖片。對於此種

    input上傳圖片file標籤的accept="image/*"屬性響應很慢的解決方法

    input上傳圖片file標籤的accept="image/*"屬性響應很慢的解決方法 input [file]標籤的accept屬性可用於指定上傳檔案的 MIME型別 。 例如，想要實現預設上傳圖片檔案的程式碼，程式碼可如下：  input type=

    input type = file上傳圖片限制大小、型別判斷、畫素判斷

    在專案中經常用到input標籤來上傳檔案，而這些檔案通常是圖片檔案。圖片有很多格式我們只需要其中的幾種，就需要對使用者上傳的檔案進行驗證，在HTML5中有一個新的屬性：accept檔案型別限制。但是通常我們會用javascript或jQuery編寫方法進行驗證圖片的大小限制、型別判斷、畫素判

    html 上傳 input type="file" 只允許上傳圖片檔案

    <from action="" enctype="multipart/form-data" method="post"> <a> <span>修改頭像</span> <input t

    input file 方式上傳圖片並實現實時預覽

    用普通的html的 <input type="file"/> 標籤是不能實現實時預覽功能的，獲取表單的值可以得到圖片所在路徑：C:\fakepath\test.png，如果將它直接賦值給img標籤的href屬性，會報錯：Not allowed to load lo

    【前端解決方案】input file 上傳圖片，並實現實時預覽

    前言 我最近在做自己個人部落格的時候，遇到一個前端的問題，就是如何實時預覽 input 標籤上傳的圖片。一般的 <input type="file’ /> 標籤是不能實現實時預覽的。 解決方案 可以通過 file 標籤和 js 的 FileReader 介面來實

    用圖片替換input file 的樣式（上傳圖片 檔案圖示）

    把input 設為透明 的。後面放一張圖片 <label> <input style="

    input type=file 上傳圖片前預覽 親測支援 ie8 chrome ff android及ios瀏覽器（將網上的版本整合一下）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html