web-dev-qa-db-ja.com

JQuery-ファイル属性

ファイルが選択された後、入力フィールドからファイル属性にアクセスしようとしています。これを試しましたが、エラー「ファイルが定義されていません」が表示されます

var file = $("#uploadedfile").prop("files")[0];
var fileName = file.fileName;
var fileSize = file.fileSize;
alert("Uploading: "+fileName+" @ "+fileSize+"bytes");
jqueryfileattr
21
JimmyJammed

#uploadedfileは、タイプが「file」の入力です。

var file = $("#uploadedfile")[0].files[0];
var fileName = file.name;
var fileSize = file.size;
alert("Uploading: "+fileName+" @ "+fileSize+"bytes");

通常、これはchangeイベントで次のように起動します。

$("#uploadedfile").on("change", function(){
   var file = this.files[0],
       fileName = file.name,
       fileSize = file.size;
   alert("Uploading: "+fileName+" @ "+fileSize+"bytes");
   CustomFileHandlingFunction(file);
});

編集：Kevinは、編集されたfilesプロパティについてのコメントで正しいです！

もう一度編集：正しい構文は

filename = this.files[0].filename;

しかし

filename = this.files[0].name;
filesize = this.files[0].size;

Fiddleを追加すると、クロスブラウザで動作するはずです： http://jsfiddle.net/eq3Qv/

42
adeneo
<form id = "uploadForm" name = "uploadForm" enctype="multipart/form-data">
    <label for="uploadFile">Upload Your File</label>
     <input type="file" name="uploadFile" id="uploadFile">                  
</form>
<script>
    $('#uploadFile').change(function(){
        var fileName = this.files[0].name;
        var fileSize = this.files[0].size;
        var fileType = this.files[0].type;
        alert('FileName : ' + fileName + '\nFileSize : ' + fileSize + ' bytes');
    });
</script>

注：アップロードするファイル名を取得するには、jquery val（）メソッドを使用します。

例：

var fileName = $('#uploadFile').val();

投稿前に上記のコードを確認しましたが、完全に機能します。

8
Srinivasan.S

ファイル名を取得するには、次を使用します。

var files = document.getElementById('inputElementID').files;

JQueryを使用すると（既に存在しているため）、これを次のように調整できます。

$('input[type="file"][multiple]').change(
    function(e){
        var files = this.files;
        for (i=0;i<files.length;i++){
            console.log(files[i].fileName + ' (' + files[i].fileSize + ').');
        }
        return false;
    });

JS Fiddle demo 。

2
David Thomas

ちょうど試して

var file = $("#uploadedfile").prop("files")[0];
var fileName = file.name;
var fileSize = file.size;
alert("Uploading: "+fileName+" @ "+fileSize+"bytes");

それは私のために働いた

1
Suraj Poddar

input.files属性はHTML5の機能です。そのため、一部のブラウザでは何も返されません。 filesが存在しない場合は、単純に古いinput.value（文字列）にフォールバックを追加します。

参照： http://www.w3.org/TR/2012/WD-html5-20121025/common-input-element-apis.html#dom-input-files

0
Fredrik Blomqvist