2012-01-23 20 views
6

input type="file" htmlタグを使用する代わりに、input type="button"をクリックしてchoose a file to uploadダイアログボックスを表示することはできますか?その後、ファイルがchoose a file to uploadダイアログボックスから選択されると、ファイルパスが通常のhtml input type="text"タグに挿入されますか?アップロードするファイルを選択するダイアログを表示するボタン

私はgmailがボタンとテキスト入力では似たようなことをしているようですが、彼らには単にadd fileというようなものがあります。そのリンクをクリックすると、select file(s) to upload by mail.google.comダイアログボックスが表示されます。ファイルをクリックすると、ファイル名が画面に表示されます。

どうしていますか?

+1

Gmailで「ファイルを添付」を右クリックすると、Flashでそれを行ったことがわかります。 – Aknosis

答えて

3

ほとんどのブラウザでは、セキュリティ上の目的でこの機能がロックされていると思います。ボタンとテキストボックスは、JavaScriptを使用して操作できます。ファイル入力ボックスは、正当な理由でできません。あなたのシステム上の機密ファイルへのパスを設定してから、ボタンクリックをシミュレートしてファイルをダウンロードすることができますか?ところで


、あなたはおそらくこれがうまくいく、それをスタイルを探している場合:http://www.quirksmode.org/dom/inputfile.html

+0

gmailは似たようなことをしませんが、ボタンとテキストの入力タイプを使用する代わりに、リンクを使用してスパンまたはdivタグを使用して、選択したファイルを表示しているようです。リンクにアップロードダイアログボックスが表示される場所は? – oshirowanen

+1

私はGMailが "Attach"機能にFlashを使用していると思います。 Flashプラグインを無効にすると、良い形式のファイル入力が追加されます。 – Sam

0

好きなように純粋にネイティブのフォーム要素である、input[type=file]を変更することはできません。

セキュリティ上の理由から、ファイルへのパスを取得することができなくなります。古いIEのバージョンではパスが表示されますが、新しいバージョンではそれ以上のケースではなくなり、サーバー側のパスでは何もできなくなります。

はしかしスタイルにいくつかの方法があります。

0

pluploadを見てください、私は、ファイルのアップロードを処理するために、それを何度も使用しました。

1

チェックこのフィドル:http://jsfiddle.net/A4BS7/1/

注:

A)これは、ファイルの入力に変更イベントを発生していない古いブラウザ(主にIE)でうまく動作しない場合があります。

b)アップロードが正常に機能するようにするには、フォームに<input type="file">要素を含める必要があります。 text要素は、選択されたファイルを最高で表示するために使用できます。

+0

アップロードしたファイルの値を別のファイルの値に追加するにはどうすればよいですか? – JohnB

4
<input type="file" style="display:none;" id="inputfile"/> 
<a href="javascript:document.getElementById('inputfile').click(); ">try this</a> 

これを試してみてください。私はそれが有用だと思う.. :)

+0

コードは評価されていますが、それには常に説明が付いています。これは長くする必要はありませんが、1行は問題ありませんが、必要です。これは自動的にフラグが立てられたので、私はモデレーションキューからここに到着しました。高品質への回答を保つことはそれを防ぐのに役立ちます。 – Veedrac

+0

シンプルで華麗です! – Sllouyssgort

+0

ありがとう@Sllouyssgort –

関連する問題