BootStrap智能表單實(shí)戰(zhàn)系列(九)表單圖片上傳的支持
什么是 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) 部分詳細(xì)講解。
CSS：Bootstrap 自帶以下特性：全局的 CSS 設(shè)置、定義基本的 HTML 元素樣式、可擴(kuò)展的 class，以及一個先進(jìn)的網(wǎng)格系統(tǒng)。這將在 Bootstrap CSS 部分詳細(xì)講解。
組件：Bootstrap 包含了十幾個可重用的組件，用于創(chuàng)建圖像、下拉菜單、導(dǎo)航、警告框、彈出框等等。這將在 布局組件 部分詳細(xì)講解。
JavaScript 插件：Bootstrap 包含了十幾個自定義的 jQuery 插件。您可以直接包含所有的插件，也可以逐個包含這些插件。這將在 Bootstrap 插件 部分詳細(xì)講解。
定制：您可以定制 Bootstrap 的組件、LESS 變量和 jQuery 插件來得到您自己的版本。
以上介紹的不是本文的重點(diǎn)，下面給大家介紹如何在生成表單后，可以支持上傳圖片后可以及時預(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里面的默認(rèn)值
note:該方法默認(rèn)接受返回的json格式為：{result:200,imgurl:'.....'},result:200 表示圖片上傳成功！
運(yùn)行截圖：
以上所述是小編給大家介紹的BootStrap智能表單實(shí)戰(zhàn)系列(九)表單圖片上傳的支持 的全部敘述，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
JavaScript中Object.prototype.toString方法的原理
這篇文章主要介紹了JavaScript中Object.prototype.toString方法的原理的相關(guān)資料,需要的朋友可以參考下2016-02-02
JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式，采用完全獨(dú)立于語言的文本格式，是理想的數(shù)據(jù)交換格式。同時，JSON是 JavaScript 原生格式，這意味著在 JavaScript 中處理 JSON數(shù)據(jù)不須要任何特殊的API或工具包，接下來跟著小編學(xué)習(xí)js中判斷json的方法吧2015-08-08
這篇文章主要介紹了JavaScript代理模式原理與用法,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript代理模式基本概念、原理、用法與操作注意事項,需要的朋友可以參考下2020-03-03
js實(shí)現(xiàn)四舍五入完全保留兩位小數(shù)的方法
這篇文章主要介紹了js實(shí)現(xiàn)四舍五入完全保留兩位小數(shù)的方法,涉及javascript針對浮點(diǎn)數(shù)的數(shù)值運(yùn)算相關(guān)技巧,需要的朋友可以參考下2016-08-08
uniapp自定義tabbar的方法(支持中間凸起、角標(biāo)、動態(tài)隱藏tab和全端適用)
一個項目有多個角色,比如醫(yī)生和患者,tabBar跳轉(zhuǎn)的路徑不一樣,但是在pages.json中無法配置多個tabBar,這時候就要自定義tabBar了,下面這篇文章主要給大家介紹了關(guān)于uniapp自定義tabbar(支持中間凸起、角標(biāo)、動態(tài)隱藏tab和全端適用)的相關(guān)資料,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Sublime Text 3常用插件及安裝方法的相關(guān)資料,需要的朋友可以參考下2015-12-12
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)驗證碼案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
JavaScript遍歷數(shù)組的方法代碼實(shí)例
這篇文章主要介紹了JavaScript遍歷數(shù)組的方法代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-01-01
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)指定時間倒計時效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
一個簡單的JavaScript Map實(shí)例(分享)
下面小編就為大家?guī)硪黄粋€簡單的JavaScript Map實(shí)例(分享)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08