43

アップロードしたフォームです。

<form class="alert alert-info">
    <div>
        <b id = "select_file" class="span3" style="font-weight: bold; cursor: pointer; ">Please select image</b>
        <input class="span3" type="file" name="image_file" id="image_file" style="display:none " />
        <input disabled="true" type="button" value="Upload image" class="btn" />
    </div>
</form>

次のスクリプトを使用して、ファイルを含むウィンドウを開きます。にファイル名を表示したい<b id = 'select_file'>。

これどうやってするの？

$('#select_file').click(function(){
    var _this = $(this);
    $('#image_file').show().focus().click().hide();

    var filename = $('#image_file').val();
    _this.html(filename);

    $('.btn').attr('disabled', false);
});
4

11 に答える 11

91

ファイル名を取得するのはかなり簡単です。matsko が指摘するように、セキュリティ上の理由から、ユーザーのコンピューター上の完全なファイル パスを取得することはできません。

var file = $('#image_file')[0].files[0]
if (file){
  console.log(file.name);
}
于 2012-12-08T18:16:43.877 に答える
52

input type fileこの方法の変更イベントでこれを行う必要があります。

$('#select_file').click(function() {
    $('#image_file').show();
    $('.btn').prop('disabled', false);
    $('#image_file').change(function() {
        var filename = $('#image_file').val();
        $('#select_file').html(filename);
    });
});​
于 2012-12-08T18:22:29.577 に答える
9

これには jQuery 関数はありません。DOM要素にアクセスして、files プロパティを確認する必要があります。

document.getElementById("image_file").files[0];

または

$('#image_file')[0].files[0]
于 2014-01-20T13:04:40.260 に答える
3

ブートストラップの使用

不要な水平スクロール バーを回避するために、入力フィールドからform-control-fileクラスを削除します

これを試して！！

$('#upload').change(function() {
    var filename = $('#upload').val();
    if (filename.substring(3,11) == 'fakepath') {
        filename = filename.substring(12);
    } // For Remove fakepath
    $("label[for='file_name'] b").html(filename);
    $("label[for='file_default']").text('Selected File: ');
    if (filename == "") {
        $("label[for='file_default']").text('No File Choosen');
    }
});
.custom_file {
  margin: auto;
  opacity: 0;
  position: absolute;
  z-index: -1;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
   <label for="upload" class="btn btn-sm btn-primary">Upload Image</label>
    <input type="file" class="text-center form-control-file custom_file" id="upload" name="user_image">
    <label for="file_default">No File Choosen </label>
    <label for="file_name"><b></b></label>
</div>

于 2018-09-10T09:24:23.240 に答える
0

var file = $('#YOURID > input[type="file"]'); file.value; // filename will be,

Chrome では、ファイルが選択されていない場合はC:\fakepath\FILE_NAMEorのようになります。undefined

ブラウザがローカル マシンのファイル構造を明らかにしないのは、制限または意図です。

于 2015-08-21T21:31:00.633 に答える
-2

セキュリティ上の理由により、これは不可能です。少なくとも最新のブラウザではそうではありません。これは、ファイルのパスにアクセスするコードが危険であり、セキュリティ リスクと見なされる可能性があるためです。未定義の値になるか、空の文字列になるか、エラーがスローされます。

ファイル フォームが送信されると、ブラウザは一時的にファイルをアップロード ディレクトリにバッファリングし、そのファイルの一時ファイル名とそのファイルのベース名のみが送信されます。

于 2012-12-08T18:15:08.217 に答える