什么是 Bootstrap？

Bootstrap 是一個用于快速開發(fā) Web 應(yīng)用程序和網(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 設(shè)置、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進的網(wǎng)格系統(tǒng)。這將在 Bootstrap CSS 部分詳細講解。

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

JavaScript 插件：Bootstrap 包含了十幾個自定義的 jQuery 插件。您可以直接包含所有的插件，也可以逐個包含這些插件。這將在 Bootstrap 插件 部分詳細講解。

定制：您可以定制 Bootstrap 的組件、LESS 變量和 jQuery 插件來得到您自己的版本。

以上介紹的不是本文的重點，下面給大家介紹如何在生成表單后，可以支持上傳圖片后可以及時預(yù)覽圖片

代碼如下(連接地址：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，縮小查找范圍，可選

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

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

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

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

ExtendAttr:

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

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

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

運行截圖：

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

最新評論