web-dev-qa-db-ja.com

Firefox 3でHTML入力フォームからファイルパスを取得する方法

以下に示すように、<input type="file">を使用した簡単なHTMLフォームがあります。

<form>
  <label for="attachment">Attachment:</label>
  <input type="file" name="attachment" id="attachment">
  <input type="submit">
</form>

IE7（およびおそらく古いFirefox 2を含むすべての有名なブラウザー）では、「// server1/path/to/file/filename」などのファイルを送信すると、正常に機能し、ファイルへのフルパスとファイル名を提供します。

Firefox 3では、Firefoxバグ追跡システム（ https://bugzilla.mozilla.org/show_bug.cgi？）で説明されているように、パスを切り捨てる新しい「セキュリティ機能」のため、「ファイル名」のみを返します。 id = 14322 ）

この「新機能」を克服する方法がわかりません。これは、webappのすべてのアップロードフォームがFirefox 3で動作しなくなるためです。

Firefox 3とIE7の両方でファイルパスを取得するための単一のソリューションを見つけるのを助けることができますか？

htmlfile-uploadfirefox-3
52
m_pGladiator

IE7（およびおそらく古いFirefox 2を含むすべての有名なブラウザー）では、「// server1/path/to/file/filename」などのファイルを送信すると、正常に機能し、ファイルへのフルパスとファイル名を提供します。

この「新機能」を克服する方法がわかりません。これは、webappのすべてのアップロードフォームがFirefox 3で動作しなくなるためです。

ここには大きな誤解があります。サーバー側でfullファイルパスが必要になるのはなぜですか？私がクライアントであり、_C:\path\to\passwords.txt_にファイルがあり、完全なファイルパスを提供していると想像してください。サーバーであるとして、そのcontentsをどのように取得しますか？ローカルディスクファイルシステムへのオープンTCP接続がありますか？Webサーバーを別のサーバーマシンで運用環境に持ち込んだときにファイルアップロード機能をテストしましたか？

bothクライアントとサーバーが物理的に同じマシンで実行されている場合にのみ機能します。その後、sameハードディスクファイルシステムにアクセスできます。これは、Webサイトをローカルで開発しているときにのみ発生します。したがって、偶然の一致でwebbrowser（クライアント）とwebserver（サーバー）の両方が同じマシンで実行されます。

完全なファイルパスがMSIEおよびその他の古代のWebブラウザで送信されているのは、セキュリティバグが原因です。 W および RFC2388 の仕様では、完全なファイルパスを含めることについて言及していません。ファイル名のみ。 Firefoxは正常に機能しています。

アップロードされたファイルを処理するために、完全なファイルパスを知る必要はありません。 _multipart/form-data_の場合、クライアントがリクエストボディでサーバーにすでに送信した完全なファイルcontentsに興味があるはずです。要求。 RFC2388に記載されているように、フォームを次のように変更します。

_<form action="upload-script-url" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit">
</form>
_

サーバー側でアップロードされたファイルの内容を取得する方法は、使用しているサーバー側のプログラミング言語によって異なります。

  • Java/JSP： HttpServletRequest#getPart() または Apache Commons FileUploadを使用しますAPI 解析する。ファイルの内容がInputStreamになっているはずです。ファイルの内容は、好みに応じてOutputStreamに書き込むことができます。 this answer に例を見つけることができます。

  • Java/JSF： _<h:inputFile>_ コンポーネントまたはその他のファイルアップロードコンポーネントを使用したい使用しているコンポーネントライブラリ。また、ここでは、InputStreamのフレーバーでファイルの内容を取得します。例については this answer をご覧ください。

  • [〜＃〜] php [〜＃〜]：ファイルの内容はすでに暗黙的に一時ディスクに保存されています。 move_uploaded_file() 関数を使用して、目的の場所に移動します。 PHPマニュアル も参照してください。

  • ASP.NET：私はそれをしないので詳細な答えはありませんが、Googleはいくつかの例を見つけました： ASP。 NETの例 、 ASP.NET 2.0の例

アップロードされたファイルのファイル名の部分を取得したいときはいつでも、trimファイル名から完全なパスを外すべきです。つまり、この情報は完全にあなたとは無関係です。また、例を参照してください Apache Commons FileUpload FAQ entry

FileItem.getName（）がファイル名だけでなくパス全体を返すのはなぜですか？

Internet Explorerは、ベースファイル名だけでなく、アップロードされたファイルへの完全なパスを提供します。 FileUploadはクライアント（ブラウザ）から提供されたものを正確に提供するため、アプリケーションからこのパス情報を削除することができます。

60
BalusC

Firefoxのプレビューでは、これが機能します-添付ファイルは、最初の例の添付ファイル要素のオブジェクトです。

           if (attachment.files)
             previewImage.src = attachment.files.item(0).getAsDataURL();
           else
             previewImage.src = attachment.value;
10
houba

実際、FF3がリリースされる直前に、私はいくつかの実験を行い、FF2はOpera 9.0。のみIEがフルパスを送信します。イントラネットアプリケーションを作成して直接ネットワークアクセスでファイルを取得する場合を除き、サーバーはユーザーがコンピューター上のファイルを保存する場所を知る必要がないため、アップロードプロセスとは無関係です。

変更されたのは（そしてそれがあなたが指すバグ項目の本当のポイントです）FF3がJavaScriptからファイルパスへのアクセスを許可しなくなったことです。そして、そこにパスをタイプ/ペーストさせないでください。これは私にとってもっと面倒です。Windowsエクスプローラーからクリップボードにファイルのパスをコピーするシェル拡張があり、そのような形式で多く使用しました。 DragDropUpload拡張機能を使用して問題を解決しました。しかし、これは話題から外れてしまいます。

この新しい動作の動作を停止するために、Webフォームは何をしているのでしょうか。

[編集] Mikeがリンクしたページを読んだ後、実際にパスのイントラネット使用（たとえば、ユーザーの識別）とローカル使用（画像のプレビューの表示、ファイルのローカル管理）が表示されます。ユーザーJam-esは、nsIDOMFileで回避策を提供しているようです（まだ試されていません）。

2
PhiLho

FF3では完全なファイルパスを取得できません。以下は、ファイルコンポーネントのカスタマイズに役立つ場合があります。

<script>

function setFileName()
{
    var file1=document.forms[0].firstAttachmentFileName.value; 

    initFileUploads('firstFile1','fileinputs1',file1);
    }
function initFileUploads(fileName,fileinputs,fileValue) {
    var fakeFileUpload = document.createElement('div');
    fakeFileUpload.className = 'fakefile';
    var filename = document.createElement('input');
    filename.type='text';
    filename.value=fileValue;
    filename.id=fileName;
    filename.title='Title';
    fakeFileUpload.appendChild(filename);
    var image = document.createElement('input');
    image.type='button';
    image.value='Browse File';
    image.size=5100;
    image.style.border=0;
    fakeFileUpload.appendChild(image);
    var x = document.getElementsByTagName('input');
    for (var i=0; i&lt;x.length;i++) {
        if (x[i].type != 'file') continue;
        if (x[i].parentNode.className != fileinputs) continue;
        x[i].className = 'file hidden';
        var clone = fakeFileUpload.cloneNode(true);
        x[i].parentNode.appendChild(clone);
        x[i].relatedElement = clone.getElementsByTagName('input')[0];
        x[i].onchange= function () {
            this.relatedElement.value = this.value;
        }}
    if(document.forms[0].firstFile != null && document.getElementById('firstFile1') != null)
    {
    document.getElementById('firstFile1').value= document.forms[0].firstFile.value;
    document.forms[0].firstAttachmentFileName.title=document.forms[0].firstFile.value;
    }
}

function submitFile()
{
alert( document.forms[0].firstAttachmentFileName.value);
}
</script>
<style>div.fileinputs1 {position: relative;}div.fileinputs2 {position: relative;}
div.fakefile {position: absolute;top: 0px;left: 0px;z-index: 1;}
input.file {position: relative;text-align: right;-moz-opacity:0 ;filter:alpha(opacity: 0);
    opacity: 0;z-index: 2;}</style>

<html>
<body onLoad ="setFileName();">
<form>
<div class="fileinputs1">
<INPUT TYPE=file NAME="firstAttachmentFileName" styleClass="file" />
</div>
<INPUT type="button" value="submit" onclick="submitFile();" />
</form>
</body>
</html>
2
Jay

これは代替ソリューション/修正です... FF3では、ファイル参照ボックスの代わりにテキストボックスでファイルのフルパスを取得できます。そしてそれも...ファイルをドラッグ/ドロップすることで！

ファイルをHTMLページのテキストボックスにドラッグアンドドロップできます。ファイルの完全なパスが表示されます。このデータは簡単にサーバーに転送したり、操作したりできます。

必要なのは、拡張機能DragDropUploadを使用することだけです

http://www.teslacore.it/wiki/index.php?title=DragDropUpload

この拡張機能は、ファイルを[ファイル参照]（入力ファイル）ボックスにドラッグアンドドロップするのに役立ちます。しかし、取得しようとすると、まだファイルのフルパスを取得できません。

そのため、この拡張機能を少し調整しました。この方法で、ファイルを「テキスト入力」ボックスにドラッグアンドドロップして、ファイルのフルパスを取得できます。そのため、FF3 Firefox 3でファイルのフルパスを取得できます。

0
Kumaresan

単純にFF3ではできません。

もう1つのオプションは、アプレットまたは他のコントロールを使用してファイルを選択およびアップロードすることです。

0
roh

これを解決する非常にい方法の1つは、ユーザーがディレクトリをテキストボックスに手動で入力し、JavaScriptのファイル値の先頭に追加することです。

面倒...しかし、それはあなたが働いているユーザーのレベルに依存し、セキュリティの問題を回避します。

<form>
    <input type="text" id="file_path" value="C:/" />
    <input type="file" id="file_name" />
    <input type="button" onclick="ajax_restore();" value="Restore Database" />
</form>

JavaScript

var str = document.getElementById('file_path').value;
var str = str + document.getElementById('file_name').value;
0
dan

[〜＃〜] xpcom [〜＃〜] をご覧ください。クライアントがFirefox 3を使用している場合に使用できるものがあるかもしれません。

0
LohanJ

これは、必要なものが正確なパスではなく、オフラインで動作するファイルへの参照である場合に役立つ例です。

http://www.ab-d.fr/date/2008-07-12/

フランス語ですが、コードはjavascriptです:)

これは、記事が指す参照です。 http://developer.mozilla.org/en/nsIDOMFilehttp://developer.mozilla.org/en/nsIDOMFileList

0
Victor