ブートストラップとは何ですか?
Bootstrapは、WebアプリケーションとWebサイトの迅速な開発のためのフロントエンドフレームワークです。 Bootstrapは、HTML、CSS、およびJavaScriptに基づいています。
歴史
ブートストラップは、TwitterのMark OttoとJacob Thorntonによって開発されました。 Bootstrapは、2011年8月にGitHubでリリースされたオープンソース製品です。
ブートストラップパッケージの内容
基本構造:ブートストラップは、グリッドシステム、リンクスタイル、背景を備えた基本構造を提供します。これについては、ブートストラップの基本構造セクションで詳細に説明します。
CSS:Bootstrapには、グローバルCSS設定、基本的なHTML要素スタイルの定義、拡張クラス、および高度なグリッドシステムの機能が付属しています。これについては、ブートストラップCSSセクションで詳しく説明します。
コンポーネント:ブートストラップには、画像、ドロップダウンメニュー、ナビゲーション、警告ボックス、ポップアップボックスなどを作成するための12を超える再利用可能なコンポーネントが含まれています。これについては、レイアウトコンポーネントセクションで詳しく説明します。
JavaScriptプラグイン:Bootstrapには、1ダース以上のカスタムJQueryプラグインが含まれています。すべてのプラグインを直接または1つずつ含めることができます。これについては、ブートストラッププラグインセクションで詳しく説明します。
カスタマイズ:ブートストラップコンポーネント、より少ない変数、および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:form idについては、検索範囲を絞り、オプション
このプラグインの原則は、画像をサーバーにアップロードすることであり、サーバーは画像ストレージへのパスを返します。最後に、フォームを送信するとき、サーバーストレージへのパス、パラメーター説明:
ID:「主に区別するために使用される自由に与えることができます」
複数:「True」、アップロード中に複数の選択ファイルが許可されるかどうか
名前:ファイルをアップロードするときに送信するキー
extendattr:
フィールド:フォームを保存すると、キー名が送信されます。オプション[シングル| mutiple | null]シングルの場合、アップロードされた画像が既存の画像を置き換えることを意味します。そうしないと、現在の画像に追加されます。
URL:画像をアップロードして送信されたURLは、global.fn.inituploadimageのデフォルト値をGlobal.jsファイルで変更することもできます。
注:デフォルトで返されたJSON形式は次のとおりです。{result:200、imgurl: '......'}、result:200は、画像のアップロードが成功することを意味します。
ランニングスクリーンショット:
上記は、編集者が紹介したBootstrap Smart Form Practicalシリーズ(9)フォーム画像アップロードのサポートの完全な説明です。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます!