Question

当我尝试从输入的type =“file”中获取值时，这是我的小问题。

这就是我的表现：

<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.length之前，请尝试验证files[0]。这样可以防止错误。

在下面的代码段中，我设置了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()" />

获取值输入文件为空

1 个答案: