通常のファイルアップロード入力を画像に置き換える

Question

ここで初心者の質問のビット。

私はフォームを持っており、そのフィールドの1つはファイルのアップロード用です。退屈な古い普通のテキスト入力ボックスの横に 'ファイルを選択'ボタンがあるのではなく、画像をクリックしてダイアログボックスを開いて写真を参照するイメージがありたいと思います。

私がこれを行うことができる方法は、2つの形式で行われました。ユーザーが画像をクリックするとモーダルボックスがフォームアップロード入力と共に表示されます。ユーザーがファイルを選択して、ユーザーがフォームに返されたことを送信します。

フォームの中にフォームを持つことは悪い練習でなければならないので、うまくいかないようです。このようにする方法はありますか？

代わりに、いつものテキスト入力ボックスを自分のグラフィックで「ファイルを選択」ボタンに置​​き換えることができますが、Googleにもかかわらず、それを行う方法がわかりません。

ためファイルの入力がどのように動作するかの周りのセキュリティ問題のヒープの任意のアイデア

Answer 1

、彼らは修正がかなり難しいです。どのような仕事、しかし、このようなスキームであるん

• のサイズはデフォルトの1にかなり近いですファイルの入力のための独自の外観を設計し、
• ポジションをあなたのファイル入力と本当ファイルを形作りますあなた
• の上に本物の1を使用して、フォーム内の同じ場所での入力、実際の入力は透明でください（つまり、ゼロに不透明度を設定）

は、今すぐあなたの要素をクリックする方法をスタイルあなたは彼らが実際にinteに見えるようにしたいブラウザがファイルの入力をクリックしたときの値。 IE7ではユーザーが入力に直接入力できるので、要素がどこでもクリックされたときに他のブラウザがすぐにファイルチューザを起動できるため、IEの場合は多少調整する必要があります。

編集 — hereは少なくともChromeで動作するjsfiddleです。 HTML：

<div class='fancy-file'> 
    <div class='fancy-file-name'>&nbsp;</div> 
    <button class='fancy-file-button'>Browse...</button> 
    <div class='input-container'> 
     <input type='file'> 
    </div> 
</div> 

私は自分のCSSでスタイルよ「偽」ファイルの入力だけでなく、実際の<input>要素をラップします。ここでCSSです：それは簡単に偽のものの上に本物の<input>を配置できるようにすること：「相対位置」を

div.fancy-file { 
    position: relative; 
    overflow: hidden; 
    cursor: pointer; 
} 

div.fancy-file-name { 
    float: left; 
    border-radius: 3px; 
    background-color: #aaa; 
    box-shadow: 
     inset 1px 1px 3px #eee, 
     inset -1px -1px 3px #888, 
     1px 1px 3px #222; 
    font-weight: bold; 
    font-family: Courier New, fixed; 
    width: 155px; 
    font-size: 12px; 
    padding: 1px 4px; 
} 

button.fancy-file-button { 
    float: left; 
    border-radius: 3px; 
    border: 1px solid red; 
    background-color: #F5BD07; 
    font-weight: bold; 
    vertical-align: top; 
    margin: 0 0 0 3px; 
} 

div.input-container { 
    position: absolute; 
    top: 0; left: 0; 
} 

div.input-container input { 
    opacity: 0; 
} 

外側容器が作られます。偽のものには私の作り上げた派手なスタイルがあり、それは実際のファイル入力の全体的なサイズとほぼ同じになるようにサイズが決められています。実際のものは絶対に配置され透明です。ここで

はそれを駆動するために、いくつかのjQueryの：

​​

ブラウザはあなたに完全なパス名を与えることはありませんが、彼らはあなたにそれの一部を与えるでしょう。いくつかのブラウザ（ChromeとIE）は明らかに偽のパス接頭辞を与えているので、コードはそれを取り除きます（役に立たないので）。

Answer 2

ファイルのアップロードフィールドは非常に限られています。参照：http://www.quirksmode.org/dom/inputfile.html

Answer 3

非常にシンプルなソリューションを - 単にあなたの入力

<label for="uploadFile"> 
    <div id="image"></div> 
</label> 
<input type="file" id="uploadFile" style="display:none" /> 

のラベルタグを入れて、ちょうど#image divの:)