Question

我正在使用带有spring mvc模块的AngularJs。我从UI上传文件并以UI格式在UI中显示文件。当我第一次上传它的工作正常，但是当我第二次上传时，我的代码无效。如果我刷新页面并上传文件，其工作正常。我帮我错了。我需要多次上传文件而不刷新页面。

JSP COde：

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <title>Angular JS Custom Directives</title>
            <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>
   <body>
      <h2>AngularJS Sample Application</h2>

      <div ng-app = "mainApp" ng-controller = "StudentController">

      <table width="100%" border="0" cellspacing="5" cellpadding="0" id="uploadFile">
   <tr>
            <td align="left" valign="middle">Upload File:</td><br/>
            <td align="left" valign="middle">
            <input name="file2" id="file2" type="file" file-model="file2"/><br/>
            </td>
             <td><input type="button" value="Submit" ng-click="uploadFormData();"></td>

          </tr>
          <tr>
    <td align="left" valign="middle">&nbsp;
    </td>
  </tr>
  </table>
  <table border="1" cellspacing="0" cellpadding="4">
     <tr ng-repeat="row in rows">
        <td ng-repeat="column in row.split(',')">{{column}}</td>
     </tr>
  </table>
     <mydirc></mydirc>
      </div>     




      <script>


         var mainApp = angular.module("mainApp", []);



         mainApp.controller('StudentController', function($scope,$http)
         {
             $scope.uploadFormData= function() 
            {
                var oMyForm = new FormData();
                    oMyForm.append("file",file2.files[0]);
                     $http({
                            method: 'POST',
                            url: 'uploadFile',
                            headers: {'Content-Type': undefined},
                            data: oMyForm,
                            transformRequest: function(response, headersGetterFunction) {
                            return response;                  
                        }
                 }).success(function(data, headers)
                    {   
                        $scope.rows=data.list;
                     });
             }; //end of click 

         }); 

      </script>

   </body>

</html>

控制器：

@RequestMapping(value = "/uploadFile")
    public @ResponseBody void upLoadFile(HttpServletRequest request,HttpServletResponse response,
             @RequestParam(value = "file") MultipartFile file) {
        JSONObject object = new JSONObject();
        StringBuilder result=null;
        try 
        {
            System.out.println(file.getOriginalFilename());

            InputStream in=file.getInputStream();
            BufferedReader reader = new BufferedReader(new InputStreamReader(in));
            result = new StringBuilder();
            List<String> ite=new ArrayList<String>();
            object.put("list", ite);
            response.getWriter().write(object.toString());
        } catch (IOException e) {e.printStackTrace();
        } catch (JSONException e) {e.printStackTrace();
        }


    }

Answer 1

根据您的代码，请查找具有隔离范围的指令的伪代码和处理文件上载的单独控制器。

HTML代码：

<div ng-app = "mainApp" ng-controller = "StudentController">
    <table width="100%" border="0" cellspacing="5" cellpadding="0" id="uploadFile">
        <tr>
            <td align="left" valign="middle">Upload File:</td><br/>
            <td align="left" valign="middle">
                <input name="file2" id="file2" type="file" file-model="file2"/><br/>
            </td>
            <td><input type="button" value="Submit" ng-click="uploadFormData();"></td>
        </tr>
        <tr>
            <td align="left" valign="middle">&nbsp;
            </td>
        </tr>
    </table>
    <list-files rows="fileList"></list-files>
</div>

指令代码：

angular.module("mainApp").directive('listFiles', function() {
    var template = '<table border="1" cellspacing="0" cellpadding="4">';
    template += '<tr ng-repeat="row in rows">';
    template += '<td ng-repeat="column in row.split(',')">{{column}}</td>';
    template += '</tr>';

    return {
        restrict: 'E',
        replace: true,
        template : template,    
        scope: {
            rows: '='
        }
    };
});

StudentController的伪代码：

angular.module("mainApp").controller("StudentController", function($scope, $http){
    $scope.fileList = [];

    $scope.uploadFormData = function() {
        // Code to upload file.
        // Ex:
        $http(...).success(function(response){
             $scope.fileList = response.list;
        });
    };
});

希望这有助于解决问题。

Angularjs指令刷新每个$ httpRequest

1 个答案: