web-dev-qa-db-ja.com

ファイルのアップロードからテキストフィールドにファイル名を渡す

ユーザーがファイルをアップロードできるフォームの一部があります。ファイル名だけを同じ形式のテキストフィールドに送信したい。したがって、ユーザーが「C：/Folder/image.jpg」をアップロードした場合、テキストフィールドには「image.jpg」と表示されます。私は自分でいくつかのコードを試しましたが、それが間違っていることを知っています：

function ff_uploadimages_action(element, action)
{var m = data.match(/((*):\/)/(.*)[\/\\]([^\/\\]+\.\w+)$/);
switch (action) {
case 'change':
if (data.match(/((*):\/)/(.*)[\/\\]([^\/\\]+\.\w+)$/).value)
ff_getElementByName('filename').value = m[2].text;
        default:;
    } // switch
} // ff_uploadimages_action

ff_uploadimagesはファイルをアップロードするフィールドであり、filenameは名前を表示するテキストフィールドです。どんな助けでも大歓迎です！ありがとう。

javascriptfunctionuploadaction
10
Fusionice

これを行う1つの方法があります

document.getElementById('upload').onchange = uploadOnChange;

function uploadOnChange() {
  var filename = this.value;
  var lastIndex = filename.lastIndexOf("\\");
  if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
  }
  document.getElementById('filename').value = filename;
}
<input id="upload" type="file" />
<input id="filename" type="text" />

jQueryについては言及していませんが、人気があることを考えると、jQueryを使用した同じソリューションがここにあります

jQuery：

$('#upload').change(function() {
    var filename = $(this).val();
    var lastIndex = filename.lastIndexOf("\\");
    if (lastIndex >= 0) {
        filename = filename.substring(lastIndex + 1);
    }
    $('#filename').val(filename);
});

デモ：

http://jsfiddle.net/pxfunc/WWNnV/4/

30
MikeM

HTML：

<input id="upload" type="file" onChange="uploadOnChange(this)" />
<input id="filename" type="text" />

JS：

function uploadOnChange(e) {
    var filename = e.value;var lastIndex = filename.lastIndexOf("\\");
    if (lastIndex >= 0) {
        filename = filename.substring(lastIndex +1);
    }
    document.getElementById('filename').value = filename;
}
0
Jesus Erwin Suarez

JQueryでのより短い方法は次のとおりです。

[〜＃〜] html [〜＃〜]

_<input type="file" id="inputFile" class="hidden"/>
<input type="text" id="inputDisplayFileName" readonly/>
<button id="buttonChooseFile">Choose file</button>
_

jQuery

_$("#buttonChooseFile").click(funtion()({
    $("#inputFile").click();        
});

$("#inputFile").change(function(){
    var fileName = $("#inputFile").prop('files')[0]["name"];

    $("inputDisplayFileName").val(fileName);
});
_

この例では、デフォルトのファイルアップロードが非表示になっているため、必要に応じて「アップロードファイル入力」のスタイルを設定できます。ボタンをクリックすると、元の（隠し）ファイルのアップロードがトリガーされます。ファイルを選択した後、.onchange()が残りの作業を行い、ファイルを「読み取り専用の入力テキスト」にコピーします。

0
Hendrik Clercx