最も単純で最速の入力タイプのファイルを作成します

こんにちは、親愛なる友人。 ネットワークおよびHabréには、入力タイプ= "ファイル"の作成に関するトピックに関する多くの記事がありますが、それらはすべて、多数の松葉杖と大量のコードが異なります。 たとえ逆説的であるとしても、 少ないほうが良いのです。







何が起こるかの実例：







カスタマイズされた入力ファイル自体の原則には、特別な違いはありません。画面から入力を削除し、すべてをラベルの肩に置き、独自のスタイルを追加します。 主な違いは、少量のコードです。



始めましょう



入力とラベルがあります：

<label for="myfile" class="label"> </label> <input type="file" class="my" id="myfile" name="myfile" multiple>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次のスタイルをmyクラスに追加して、画面から入力を削除します。

 .my { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、独自のスタイルを追加して、ラベル自体のスタイルを設定します。

 .label { width: 180px; height: 50px; border-radius: 4px; text-align: center; cursor: pointer; display: block; font: 14px/50px Tahoma; transition: all 0.18s ease-in-out; border: 1px solid #333; color: #333; } .label:hover { color: white; background: #333; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして今、楽しい部分：javascript。 実際にはここにあります：

 $('.my').change(function() { if ($(this).val() != '') $(this).prev().text(' : ' + $(this)[0].files.length); else $(this).prev().text(' '); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次のように機能します。ユーザーが.myクラスの入力をクリックすると、jsはその変更の追跡を開始します。 その後、（もし）場に出たら。 したがって、この（この）入力が空でない（つまり、ファイルが選択されている）場合、その隣の要素（これはラベルです）には、テキスト "Files selected" +ユーザーが選択したファイルの数が表示されます。 ユーザーが何も選択していない場合、ラベルには「ファイルを選択」というテキストが表示されます。



それだけです！



//追加情報



レイアウトに問題がある可能性がありますが、これも私の問題でした。 そして、問題はこの悪名高い.prev（）にある可能性があります。 実際、ラベルと入力ファイルを隣り合わせに配置することは不可能である可能性があり、テキスト「選択されたファイル」はラベルではなく左側の要素に適用されます。



この問題は次のように解決できます。



ラベルと入力を1つのdivに入れ、このdivにクラス（たとえば、「box-form」）を与えます

 <div class="box-form"> <p> -</p> <div> <label for="myfile" class="label"> </label> </div> <div> <div></div> <input type="file" class="my" id="myfile" name="myfile" multiple> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そしてjsで置き換えます

 $(this).prev()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

に

 $(this).closest('.box-form').children('.label')
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

出来上がり！ これで、ラベルと入力は遠く離れた状態で相互にやり取りできるようになりました。



もちろん、そのような場合を避ける方が良いですが、入力を書いていないフレームワークから誰も保護されていませんが、フレームワーク自体がそれらを生成します...



ご清聴ありがとうございました。