web-dev-qa-db-ja.com

javascriptを使用してドキュメント内のファイルアップロードのファイル名を取得する

var fu1 = document.getElementById("FileUpload1");

id FileUpload1でfileuploadコントロールのファイル名を取得するにはどうすればよいですか

javascriptfile-upload
24
Mishigen

次のように、valueプロパティを試してください。

var fu1 = document.getElementById("FileUpload1");
alert("You selected " + fu1.value);

[〜＃〜] note [〜＃〜]：FileUpload1は、ASP.Netサーバー側のFileUploadコントロールです。
その場合、次のように ClientID プロパティを使用してIDを取得する必要があります。

var fu1 = document.getElementById("<%= FileUpload1.ClientID %>");
35
SLaks

Google chrome element.valueでは、名前+パスを返しますが、偽のパスです。したがって、私の場合、次のようにファイルのname属性を使用しました。

function getFileData(myFile){
   var file = myFile.files[0];  
   var filename = file.name;
}

これはページからの呼び出しです：

<input id="ph1" name="photo" type="file" class="jq_req" onchange="getFileData(this);"/>
34
vanessen

アップロードされたファイル名のみを取得するには、これを使用します。

fake_path=document.getElementById('FileUpload1').value
alert(fake_path.split("\\").pop())

FileUpload1 valueには、ファイルの分割要素を使用して最後の要素をポップすることを避けるために、おそらく望まない偽のパスが含まれています。

3
Mohamed Thasin ah

document.getElementById("FileUpload1").valueを試してください。この値には、アップロードするファイルのパスが必要です。その値からすべてのディレクトリを削除するだけで、ファイル名が得られます。

3
RaYell

RaYell、返された値を解析する必要はありません。 document.getElementById("FileUpload1").valueは、拡張子付きのファイル名のみを返します。 「title」という名前の入力ボックスにアップロードするファイルの名前をコピーしたかったので、これは私にとって便利でした。私のアプリケーションでは、アップロードされたファイルの名前がバックエンドデータベースによって生成されたインデックスに変更され、タイトルがデータベースに保存されます。

3
DavidHyogo

このようなコードをフォームで使用すると、元のソースアップロードファイル名をキャプチャし、2番目の単純な入力フィールドにコピーできます。これは、ファイルアップロードファイル名は不変であるため、ユーザーが送信要求で代替アップロードファイル名を提供できるようにするためです。

    <input type="file" id="imgup1" name="imagefile">
      onchange="document.getElementsByName('imgfn1')[0].value = document.getElementById('imgup1').value;">
    <input type="text" name="imgfn1" value="">
2
rickatech

試してみる

var fu1 = document.getElementById("FileUpload1").value;
2
Adriaan Stander