DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> BootStrap智能表單實戰系列(九)表單圖片上傳的支持
BootStrap智能表單實戰系列(九)表單圖片上傳的支持
編輯:關於JavaScript     

什麼是 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智能表單實戰系列(九)表單圖片上傳的支持 的全部敘述,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved