Javascript 如何要求用户上传文件并在我的代码中使用_Javascript_Json_Angularjs_File Upload_Upload

Javascript 如何要求用户上传文件并在我的代码中使用

javascript json angularjs file-upload

Javascript 如何要求用户上传文件并在我的代码中使用,javascript,json,angularjs,file-upload,upload,Javascript,Json,Angularjs,File Upload,Upload,嘿，伙计们，我想知道如何用一个用户上传的另一个json替换一个json 这是我的javascript代码 var app = angular.module('miApp', []); app.controller('mainController', function ($scope, $http) { $http.get('cuidades.json').success(function(data){ $scope.cities = data; }); }); 这是我的ht

嘿，伙计们，我想知道如何用一个用户上传的另一个json替换一个json

这是我的javascript代码

var app = angular.module('miApp', []);

app.controller('mainController', function ($scope, $http) {
    $http.get('cuidades.json').success(function(data){
 $scope.cities = data;
    });
});

这是我的html代码，有了这些代码，我可以从我的计算机上得到一个json，这很好，但我不知道如何要求用户上传文件并加载他的文件

<!doctype html>
<html ng-app="miApp">
  <head>
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js">
    </script>
        <script src="prueba.js"></script>
  </head>

  <body ng-controller="mainController">
    <h1>Ciudades</h1>
    <table>
      <label>Filtro:</label>
        <input ng-model="query">
      <hr>
      <tr ng-repeat="city in cities | filter:query | orderBy:'name'">
        <td> {{city.name}} - {{city.country}}</td>
      </tr>
    </table>

        <label>Selecciona un archivo para subir</label>
        <br />
        <input type="file" ng-model-instant/>
    <input type="submit" value='submit'/>

  </body>
</html>


城市
Filtro：

{{city.name}-{{city.country}
选择联合国档案馆

正如Brian所说，您可以使用。这是我的代码，基于我在谷歌上搜索到的一个示例

    $scope.$watch('foto', function () {
        $scope.uploadFile($scope.foto);
    });

    $scope.uploadFile = function () {

        var file;
        if ($scope.foto) {
            file = $scope.foto[0];  
        } 
        if (!file) return;

        console.log('uploadfile()');
        console.log('file', file);

        $scope.upload = Upload.upload({
            url: '/api/photo',
            method: 'POST',
            data: angular.toJson($rootScope.usuario),
            file: file
        }).progress(function (evt) {
            $scope.uploadProgress = parseInt(100.0 * evt.loaded / evt.total, 10);
            console.log('uploadProgress', $scope.uploadProgress);
        }).success(function (data) {
            console.log('Sucesso no upload');
            console.log('data', data);
            $rootScope.usuario.foto = '/uploads/' + data.files.file.name;
        });
    };

和我的html代码：

<input type="file" name="userPhoto" ngf-select ng-model="foto" />
<div class="progress" style="margin-top: 20px;">
    <div class="progress-bar" progress-bar="uploadProgress" role="progressbar">
        <span ng-bind="uploadProgress"></span>
        <span>%</span>
    </div>
</div>

希望我有所帮助

有许多库可用于处理此问题并避免边缘情况。试试这个例子：或者这个oen代表角度。如果你在谷歌上搜索，如果这两个都不够的话，还有很多其他的。