什么是 Bootstrap？

Bootstrap 是一個用于快速開發(fā) Web 應用程序和網(wǎng)站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

歷史

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發(fā)的。Bootstrap 是 2011 年八月在 GitHub 上發(fā)布的開源產(chǎn)品。

Bootstrap 包的內(nèi)容

基本結(jié)構(gòu)：Bootstrap 提供了一個帶有網(wǎng)格系統(tǒng)、鏈接樣式、背景的基本結(jié)構(gòu)。這將在 Bootstrap 基本結(jié)構(gòu) 部分詳細講解。

CSS：Bootstrap 自帶以下特性：全局的 CSS 設置、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進的網(wǎng)格系統(tǒng)。這將在 Bootstrap CSS 部分詳細講解。

組件：Bootstrap 包含了十幾個可重用的組件，用于創(chuàng)建圖像、下拉菜單、導航、警告框、彈出框等等。這將在 布局組件 部分詳細講解。

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

•調(diào)用global.Fn.InitPlugin('img','formContainer');formContainer:為表單id，縮小查找范圍，可選

本插件的原理是將圖片上傳到服務器，然后服務器返回圖片存儲的路徑，最后提交表單的時候?qū)D片的路徑發(fā)送給服務器存儲，參數(shù)說明：

id:'可以任意給，主要用來區(qū)分'

multiple:'true' ,上傳時候是否允許多選文件

name:上傳文件時，提交的鍵

ExtendAttr:

field:保存表單時，發(fā)送的鍵名handle:可選[single|mutiple|null] 如果為single，表示上傳的圖片會替換現(xiàn)有的圖片，否則將追加在當前圖片后面

url:圖片上傳提交的url,你也可以修改global.js文件中的global.Fn.InitUploadImage里面的默認值

note:該方法默認接受返回的json格式為：{result:200,imgurl:'.....'},result:200 表示圖片上傳成功！

運行截圖：

以上所述是小編給大家介紹的BootStrap智能表單實戰(zhàn)系列(九)表單圖片上傳的支持 的全部敘述，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論