1 페이지에서 2 페이지로 fileList 객체 전달하기

Question

여러 파일을 선택할 수있는 파일 입력이 있습니다. 동일한 이미지에 미리보기를 표시하는 방법을 알고 있습니다. 그러나 제 경우에는 1 페이지의 이미지를 선택하고 2 페이지로이 파일 목록을 보내 업로드하기 전에 미리보기를 표시하고 싶습니다. 나는 그것이 매우 간단 할 것이라고 생각했지만, dint는 그것을 작동하게 만든다.

로컬 저장소를 조사한 결과 파일 API를 직렬화 할 수 없으므로 1 페이지의 FileReader를 사용하여 다른 해결 방법을 시도하고 독자 결과를 로컬 저장소에 설정했습니다. 나는 filereader 접근 방식을 파일과 크기의 수는 실제로 클 수 있습니다.

파일 선택 후 1 페이지에서 2 페이지로 fileList 객체를 전달할 수있는 방법에 대한 아이디어가 있습니까? FileObjects가 일반적인 방법으로 페이지간에 데이터를 전달하는 방식을 잘 모르겠습니다 ... 감사합니다!

Answer 1

각도 js 서비스를 사용하여 문제를 해결했습니다.

경우 사람의 코드는 관심

:

1 페이지의 HTML :

<input type="file" ng-model-instant id="fileToUpload" accept="image/*" 
        multiple onchange="angular.element(this).scope().setFiles(this);document.location.href = '/#/page2';"/> 

services.js :

angular.module("fileservices", []) 
    .service('fileListService', function() { 
     var fileList = []; 

     return { 
      getFileList: function() { 
       return fileList; 
      }, 
      setFileList: function(value) { 
       fileList = value; 
      } 
     }; 
    }); 

page1Controller :

.controller("page1Ctrl", ["$scope","fileListService", function ($scope,fileListService) { 
     $scope.setFiles = function(element) { 
      var files = []; 
      // Turn the FileList object into an Array 
      for (var i = 0; i < element.files.length; i++) { 
       files.push(element.files[i]) 
      } 
      fileListService.setFileList(files); 
      var data = fileListService.getFileList(); 
     }; 
    }]) 

페이지 2 컨트롤러 :

.controller("page2Ctrl", ["$scope","fileListService", function ($scope,fileListService) { 
     var data= fileListService.getFileList(); 
     $scope.getFiles = data; 
}]) 

희망 하시겠습니까?