最近、私は自分の個人的なウェブサイト、フロントエンドで使用されているブートストラップフレームワークを書いています。写真のアップロード機能を達成したとき、インターネット上のブートストラップベースの画像アップロードファイル入力プラグインを見つけました。このプラグインは私の美的ビューと非常に一致しているため、このプラグインの使用を簡単に記録します。
まず、プロジェクトパスに従ってプラグインCSSとJSファイルを紹介します
locale言語ファイルは、fileinput.min.jsファイルの後に導入されることに注意してください
<！ - file input-> <link href = "../// css/fileinput.min.css" rel = "styleSheet"> <script src = "../../ js/fileinput.min.js"> </script> <script src = "..//../ js/zh.js"タイプ= "/javas"> </javascript "
私はプロのフロントエンドではないので、HTMLコードがありますので、フロントエンドコードは非常に悪いです。
<！ - モーダルボックス（モーダル） - > <スパンスタイル= "ホワイトスペース：pre"> </span> <div id = "mymodal" tabindex = "-1" lole = "dialog" aria-labelledby = "mymodallabel" aria-hidden = "true"> <span style = "White-space" pre "> </</</</</<</<</> <div </</</<span> style = "white-space：pre"> </span> <div> <span style = "pre"> </span> <div> <span style = "white stace：pre"> </span> <div> <div> <span style = "pre"> </span> <ボタンタイプ= "button" data-dismiss = "modal" sprided = "> </<</<</<</span" style = "white-space：pre"> </span> </button> <span style = "white-space：pre"> </span> <h3 id = "mymodallabel" align = "center"> <span style = "white style =" pre "> </span> <b>音楽スコア情報の追加</b> <スパンスタイル= </span></div> <span style="white-space:pre"> </span><div> <span style="white-space:pre"> </span><form id="addForm" role="form" enctype="multipart/form-data"> <span style="white-space:pre"> </span> <div> <span style="white-space:pre"> </span> <span> Score name</span> <span style = "white-space：pre"> </span> <span style = "white-space：pre"> </span> <入力タイプ= "テキスト" id = "scorename" name = "scorename" placeholder = "" ""> <span style = "white =" white = "white =" <SPAN STYLE = "White-Space：PRE"> </SPAN> <SPAN STYLE = "PRE"> </span> <span>スコアタイプ</span> <スパンスタイル= "ホワイトスペース="ホワイトスペース= "ホワイトスペース：pre"> </span> <span style = "ホワイトスペース：pre"> </span> <span </"> </"> </"> < </span> <span style = "ホワイトスペース：pre"> </span> <span style = "ホワイトスペース：pre"> </span> </div> <span style = "ホワイトスペース：pre"> </span> <span style = "ホワイトスペース：pre"> </span> <span style = "white-space：pre"> </span> <div-lettable：nigber-table top：nign magne-table top; 90px; "> <Span style =" White-Space：pre "> </span> <span style =" white style = "pre"> </span> <span style = "white style =" pre "> </span> <span style =" white-face：pre "> </span> <inputタイプ="テキストid = "難易度" name " </span> </div> <span style = "white-space：pre"> </span> <div style = "margin-top：10px;"> <span style = "white =" pre "> </span> <span style =" white style = "pre"> </span> <span style = "white-space：pre"> </span = <pre "> </"> < </span> <入力タイプ= "text" id = "tune" name = "tune"> <span style = "white-space：pre"> </span> </div> <span style = "white face：pre"> </span> <div> <span style = "white space：pre"> </span> <input id = "fileup" Type = "ファイル"/> </> </> </> </> </</> style = "white-space：pre"> </span> </form> <span style = "white-space：pre"> </span> </div> <span style = "white stace：pre"> </span> </div> <span style = "white =" pre "> </span> <div> <span style ="ホワイトスペース：pre "> </span <ボタン"> <ボタン "> <ボタンタイプ= style = "white-space：pre"> </span> </button> <span style = "white-space：pre"> </span> <！ - <span style = "white-space：pre"> </span> <！ - <span style = "white =" pre "> </span> </div> <span style =" white-space：pre "> </span < style = "ホワイトスペース：pre"> </span> </div> <！ - /.modal-> <span style = "white-space：pre"> </span> </div>
その後、JSコードはファイル入力を初期化します
// FileInputコントロール（最初の初期化）関数initfileInput（ctrlname、uploadurl）{var control = $（ '＃' + ctrlname）; control.fileInput（{言語： 'zh'、//言語の設定uploadurl：uploadurl、//アップロードされたアドレスAlductfileExtensions：['jpg'、 'png'、 'gif']、// // Button Style PreviewFileicon： "<I class = 'glyphicon glyphicon-king'> </i>"、uploadasync：false、uploadextradata：function（index）{var obj = {}（ '＃addform'） $（）。 } // fileinput initfileInput（ "fileUp"、http：// localhost：8080/web/guita/addguitainfo.action）;このコードはプラグインの中核です
uploadurlは、背景で与えられるアクセスパスです
これは特別な段落です
uploadextradata：function（previewid、index）{var obj = {}; $（ '＃addform'）。find（ 'input'） OBJを返します。 }このコードuploadextradataは、他の入力ボックスデータにフォームフォームを送信するために使用できる追加のパラメーターを渡すのに適しています。
uploadextradata：{type： "type"、tune： "tune"}一般に、上の図に示すように、静的データは直接受信できます。ただし、このように書くと、動的なデータが取得されません。データは初期化中に1回のみ生成され、変更されません。
私は多くの時間この問題について混乱してきました。最後に、Gitに関する外国人の友人の議論を読み、APIを参照してそれを解決します。
これらを書いた後、レンダリングを見ることができます
スタイルはまだとても良いです。クリックしてアップロードすると、データ全体がバックグラウンドに送信されます。
オンラインで見つけたプラグインアプリケーションの多くは、PHPと統合されています。 Javaで書きました。ここでは、バックグラウンドで受信したコードにも行きました。 SpringMVCフレームワークは、データを受信するのに非常に便利です。
このようにして、データパラメーターと画像パラメーターが渡され、背景はファイルによってアップロードされたコードを呼び出して画像を保存します
このプラグインには勉強する価値のある多くの使用法があります。ここでは、それを使用する方法について簡単に説明し、動的データの送信を完了します。このプラグインに接触したばかりの友人は、簡単に参照できます。
ファイル入力プラグインを使用して画像をアップロードするというブートストラップの方法について多くのことを紹介しました。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！