ヒントまたは別のプラグインが必要な理由は何ですか？
かつて
CSSツールのこの要素では、フォントサイズのみを変更できます。 私たちは皆、力が大好きです。 あなたは本当にこの扱いにくいファイルを完全に制御したいですか？ ここでは、現代のインターネットの魔法の束が私たちの助けになります-JavaScript + CSS。
私たちのプロジェクトではjQueryを使用しているため、最初に行ったのは既成のプラグインを使用したソリューションを探すことでしたが、すぐに失望しました。 見つかったプラグインは、お客様の要件を満たしていないか、まったく必要のない追加機能を提供しました。 これから何が続きますか？ そうです-
TKとして
私たちのプロジェクトのフォームには、ファイルをダウンロードするためのいくつかのチェックボックスとオプションのフィールドが含まれています。 お客様は、「チェックボックスを使用してファイルをダウンロードしたい！」と言いました。
頭をかいた。 インターネットでは、このような機能はフラッシュを使用して実装されるか、 ajaxファイルのアップロードにバンドルされていました。 最初のオプションはすぐに拒否されます-flash'emは私たちに誰もすることがなく、私たちは彼が好きではありません。 2番目のオプションは、いくつかの理由で不便でした。
- jqueryフォームを使用して、iframe経由でフォーム全体を送信します。
- プラグインは、要素のスタイル設定に必要な機能を提供しませんでした。
開発者、開発者、開発者、開発者
標準の要素置換スキームは次のとおりです。
- 入力[type = file]は絶対配置で<div />にラップされます。
- パラメータに既存の「代替」がない場合は、要素の以前の場所で作成されます。
- 入力[type = file]の「ラッパー」は、プレースホルダーのすぐ上にあります。
「なんでこんなに複雑なの？！」 残念ながら、入力[type = file]のクリックをエミュレートすることはうまく機能しないか、まったく機能しないため、ストリートマジックが必要です。
さて、実際にそれがどのように機能するか：
function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
function replace() { $replacement .addClass(config.replacementClass + '-' + currentId) // CSS class name .insertBefore($input) // input'a .bind( 'mouseenter' , function () { toggleVisibility( true ); toggleHoverClass( true ); }) .bind( 'init' , function () { createWrapper(); // createFileName(); // }) .trigger( 'init' ); } * This source code was highlighted with Source Code Highlighter .
ラッパーの作成を詳しく見てみましょう。
*このソースコードは、 ソースコードハイライターで強調表示されました。
- 関数 createWrapper（）{
- var cord = getElementCoordinates（$の置換）; //ラッパーが代替と正確に同じ次元を占めることが必要です
- var wrap = $（ '<div />' 、{
- css：{
- 位置： 「絶対」 、
- visibility： "hidden" 、 //ラッパーはデフォルトで非表示
- オーバーフロー： "hidden" 、
- zIndex：10000000、 //ページ上の他のすべての要素の「上」に配置
- opacity：0、 //ロード用の標準ボタンは表示されません
- 左：cord.left、
- 上：cord.top、
- 幅：$ replacement.get（0）.offsetWidth、
- 高さ：$ replacement.get（0）.offsetHeight、
- マージン：0、
- パディング：0、
- 方向： 「ltr」
- }
- }）
- .addClass（config.wrapperClass）
- .bind（ 'mouseout' 、 function （）{
- toggleVisibility（ false ）;
- toggleHoverClass（ false ）;
- }）;
- $ input.wrap（ラップ）.css（config.inputCss）;
- }
さらに、最後の行では、次のCSSスタイルを標準要素に適用します。
*このソースコードは、 ソースコードハイライターで強調表示されました。
- inputCss：{
- fontSize： '600px' 、 //「参照」ボタンをできるだけ大きくする
- 位置： 「絶対」 、
- right：0、 //ラッパーの右境界線に揃えます
- マージン：0、
- パディング：0
- }、
これは、ラッパーをクリックして、常に[type = file]入力ボタンにアクセスし、ファイルをダウンロードするための標準ダイアログを呼び出すために必要です。
ファイル名を表示するフィールドを作成するのは非常に簡単です。
*このソースコードは、 ソースコードハイライターで強調表示されました。
- 関数 createFileName（）{
- {
- if （！jQuery.contains（ document .body、$ filename.get（0）））{
- throw （ "not found" ）;
- }
- } catch （e）{
- if （！$ filename.length）{
- throw （ "filename is empty" ）;
- }
- $ replacement.after（$ filename）;
- }
- $ filename.addClass（config.filenameClass + '-' + currentId）;
- }
名前を表示するための要素がページにない場合は、ラッパーの直後に追加します。
基本的な機能は用意されていますが、選択したファイルを削除する機能を提供する必要があります。 これは別の問題です。入力[type = file]の値は読み取り専用です。 次の焦点に進みます-すべての特性をコピーしながら、その場で新しい入力を作成します。
*このソースコードは、 ソースコードハイライターで強調表示されました。
- function onClear（）{
- var el = $ input.get（0）;
- var attrs = {};
- //値を除く、古い入力のすべての属性をコピーします
- for （ var i = 0; i <el.attributes.length; i + = 1）{
- var attrib = el.attributes [i];
- if （attrib.specified === true && attrib.name！== 'value' ）{
- attrs [attrib.name] = attrib.value;
- }
- }
- attrs.value = "" ;
- //新しい入力を作成し、古い入力をそれに置き換えます
- $ input = $（ '<input />' 、attrs）;
- $（ this ）.replaceWith（$ input）;
- //イベントをバインドします
- $ input.css（config.inputCss）.bind（ 'change' 、onChange）.bind（ 'clear' 、onClear）.trigger（ 'change' ）;
- toggleActiveClass（ false ）;
- }
助けて
プラグインの使用は非常に簡単です-最新のjQuery、プラグインスクリプト自体を接続し、次の行を登録する必要があります。
*このソースコードは、 ソースコードハイライターで強調表示されました。
- <script type = "text / javascript" >
- $（ 関数 （）{
- $（ "＃fileupload-1" ）.customInputFile（{
- ファイル名： "＃filename-1"
- }）;
- $（ "＃fileupload-2" ）.customInputFile（）;
- $（ '#clear' ）.bind（ 'click' 、 function （）{
- $（ "＃fileupload-1、＃fileupload-2" ）.trigger（ "clear" ）;
- }）;
- }）;
- </ script>
この例では、2つの標準ファイルアップロード要素を置き換えています。 プラグインの呼び出しの違いは、最初のケースでは、ファイル名を表示する要素を明示的に示すという事実のみです。 2番目の場合、このアイテムは自動的に作成されます。
値のリセットは、交換可能な入力でclearイベントを呼び出すことにより初期化されます。 次の状況では、パラメーターでCSSクラスを指定することもできます。
- ファイルが選択されていません。
- 選択されたファイル。
- ：ファイルが選択されていないときにホバーします。
- ：ファイルが選択されたときにホバーします。
これらは、3つのクラスの組み合わせを使用して実現されます。
*このソースコードは、 ソースコードハイライターで強調表示されました。
- replacementClass： "customInputFile" 、
- replacementClassHover： "customInputFileHover" 、
- replacementClassActive： "customInputFileActive" 、
デモンストレーションと配布資料
プラグインの結果は、次の2つの写真で確認できます。
プロジェクトのソースコードはbitbucketで入手でき ます。ライブデモはこちらでご覧いただけます。