Question

我有一个文件输入来选择多个文件。我知道如何在同一页面上显示这些图像的预览。但是，在我的情况下，我想在第1页上选择图像并将此文件列表发送到第2页以在上传之前显示预览。我认为这很简单，但dint可以让它工作。

我查看了本地存储，发现File API无法序列化，因此尝试使用FileReader进行其他解决方案，并将读取结果设置为本地存储..我想使用filereader方法作为数字文件和大小可能真的很大。

关于如何在文件选择后将第1页的fileList对象传递给第2页的任何想法？我不确定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;
 }])

希望它有所帮助！

将fileList对象从第1页传递到第2.html页

1 个答案: