値の入力ファイルが空です

Question

これは私のタイプの入力から値を取得しようとしていますが、私の小さな問題です。

これは私がやっている方法です：

<tr ng-repeat="imagenDatos in tableImagenesPunto | filter: busquedaDatosPunto " > 
    <td>PNG</td> 
    <td>{{imagenDatos.id_puntoEmpresa}}</td> 
    <td>{{imagenDatos.nombre_punto}}</td> 
    <td>{{imagenDatos.direccion_punto}}</td> 
    <td> 
    <input type="file" name="uploadFile[]" id="inputFileServer" accept="image/png" ng-click="inputChange()" /> 
    </td> 
    <td>{{imagenDatos.ruta_punto}}</td> 
    <td> 
    <button type="submit" class="btn btn-info btn-sm " value="Upload3" ng-click="uploadFile()" id="btnSubirArchivo" role="button" data-original-title="Subir Logo"> 
         <span class="glyphicon glyphicon-open-file" aria-hidden="true"></span> 
    </button> 
    </td> 
</tr> 

を、これはJS

$scope.uploadFile = function() 
{ 
var file = document.getElementById('inputFileServer').files[0]; 
console.log(file); 
} 

上の結果では、「未定義」で、どのように私はそれで間違っているかを知ることができますか？

Answer 1

ユーザーがファイルをアップロードする前に、おそらくfilesを読んでいる可能性があります。 files[0]にアクセスする前にfiles.lengthの妥当性を確認してください。それはエラーを防ぐでしょう。

以下のスニペットでは、ファイルの数を1秒ごとに出力するsetIntervalを設定しました。ユーザーがファイルをアップロードすると、カウントが更新されることがわかります。

アプリケーションでは、入力時にchangeイベントを聴いて、ファイル長の検証に基づいてアクセスできます。うまく

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

 
setInterval(function() { 
 
    files = document.getElementById('inputFileServer').files; 
 
    console.log("Number of files: ", files.length); 
 
}, 1000); 
 

 
function inputChange() { 
 
    alert("Input changes"); 
 
}

<input type="file" name="fileToUpload[]" id="inputFileServer" accept="image/png" onchange="inputChange()" />