2

次のコードがあります。

<input type="file" multiple='multiple'>
<div id="thumbs"></div>

<script type="text/javascript">
    $('input[type="file"]').change(function() {
    $('#thumbs').html('');
    $.each(this.files, function() {
    readURL(this);
 })
});

function readURL(file) {
    var reader = new FileReader();
    reader.onload = function(e) {
    $('#thumbs').append('<img src="' + e.target.result + '" width="20%">')
    $('#quantity').text(i)
  }
  reader.readAsDataURL(file);
}
</script>

これはマルチアップロード入力です。「x」枚の写真を選択すると、それらのサムネイルが作成されます。それは完全に機能しますが、ファイル名を取得する方法を知りたいです（画像の名前が「sun.jpg」の場合、「sun」を取得したい）、それらを画像に追加します。私はこれを試しました：

$('#thumbs').append('<img src="' + e.target.result + '" width="20%"><p>'+e.name+'</p>')

しかしe.nameですundefined。

ここにすべてのフィドルがあります：https://jsfiddle.net/ugs6rzqx/1/

どんな助けでも大歓迎です。ありがとう。

4

3 に答える 3

5

FileReader のイベント オブジェクトは、ファイルに関する詳細にスリムです。コールバック内では、名前、日付、サイズなどのすべてのファイル メタ情報を保持している通常の File オブジェクトにアクセスできます。

あなたのコードは、file代わりに使用する必要がありますe

$('#thumbs').append('<img src="' + e.target.result + '" width="20%"><p>'+file.name+'</p>')
于 2016-02-02T20:16:13.487 に答える
4

名前だけが欲しい場合：

$('#thumbs').append('<img src="' + e.target.result + '" width="20%"><p>'+file.name.split('.')[0]+'</p>')

作業フィドル: https://jsfiddle.net/robertrozas/ugs6rzqx/3/

于 2016-02-02T20:21:34.663 に答える
3

使用する

file.name

これがあなたのフィドルです：https://jsfiddle.net/ugs6rzqx/2/

于 2016-02-02T20:16:15.133 に答える