什麼是 Bootstrap?
Bootstrap 是一個用於快速開發 Web 應用程序和網站的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的。
歷史
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發的。Bootstrap 是 2011 年八月在 GitHub 上發布的開源產品。
Bootstrap 包的內容
基本結構:Bootstrap 提供了一個帶有網格系統、鏈接樣式、背景的基本結構。這將在 Bootstrap 基本結構 部分詳細講解。
CSS:Bootstrap 自帶以下特性:全局的 CSS 設置、定義基本的 HTML 元素樣式、可擴展的 class,以及一個先進的網格系統。這將在 Bootstrap CSS 部分詳細講解。
組件:Bootstrap 包含了十幾個可重用的組件,用於創建圖像、下拉菜單、導航、警告框、彈出框等等。這將在 布局組件 部分詳細講解。
JavaScript 插件:Bootstrap 包含了十幾個自定義的 jQuery 插件。您可以直接包含所有的插件,也可以逐個包含這些插件。這將在 Bootstrap 插件 部分詳細講解。
定制:您可以定制 Bootstrap 的組件、LESS 變量和 jQuery 插件來得到您自己的版本。
以上介紹的不是本文的重點,下面給大家介紹如何在生成表單後,可以支持上傳圖片後可以及時預覽圖片
代碼如下(連接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form3-ele-img.html):
•依賴jquery-file-upload插件,需要引用jquery.ui.widget.js、jquery.iframe-transport.js、jquery.fileload.js
•調用global.Fn.InitPlugin('img','formContainer');formContainer:為表單id,縮小查找范圍,可選
本插件的原理是將圖片上傳到服務器,然後服務器返回圖片存儲的路徑,最後提交表單的時候將圖片的路徑發送給服務器存儲,參數說明:
id:'可以任意給,主要用來區分'
multiple:'true' ,上傳時候是否允許多選文件
name:上傳文件時,提交的鍵
ExtendAttr:
field:保存表單時,發送的鍵名handle:可選[single|mutiple|null] 如果為single,表示上傳的圖片會替換現有的圖片,否則將追加在當前圖片後面
url:圖片上傳提交的url,你也可以修改global.js文件中的global.Fn.InitUploadImage裡面的默認值
note:該方法默認接受返回的json格式為:{result:200,imgurl:'.....'},result:200 表示圖片上傳成功!
運行截圖:
以上所述是小編給大家介紹的BootStrap智能表單實戰系列(九)表單圖片上傳的支持 的全部敘述,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!