javascript - 使用 FileList 拖放 AngularJs

Question

我对前端开发非常陌生，我认为向当前上传页面添加拖放功能会很酷。然而，在开始使用 ng-flow (帮助拖放的指令)连接所有内容之后，我似乎无法建立有关如何将文件添加到文件列表的连接。如果您认为我什至不需要该指令并且只是过度杀伤，并且有一个更简单的解决方案，我也愿意做出改变。注意:我只提供代码示例，因此不要因为无法编译而指责它!

文件模型指令:

app.directive('fileModel', ['$parse', '$log', '$confirm',
    function ($parse, $log, $confirm) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                var model = $parse(attrs.fileModel);
                var modelSetter = model.assign;
                scope.sampleFile = model;
                element.bind('change', function () {
                    // if the file open dialog is raised and the file name
                    // is cleared and cancel is pressed then a reset is needed
                  //  document.getElementById('file-upload-name').innerHTML = "";
                  //  document.getElementById('file-upload-btn').disabled = true;

                    // status always needs reset if choosing another file
                    scope.$apply(function () {
                        modelSetter(scope, element[0].files);
                        if (document.getElementById('file-upload').files) {
                            // This iterates over to see if the total files size is greater than 100MB
                            const maxFilesSize = 104857600;
                            var totalFilesSize = 0;
                            var numberOfDataSamples = element[0].files.length;


                        }
                    });
                });
            } // link
        };
    }]); // fileModel

文件方法

  $scope.uploadFile = function () {
                console.log(flow)
                var file = flow.file;
                $scope.numberOfFiles = document.getElementById('file-upload').files.length;
                $scope.filesTotalSize = 0;
                for (var i = 0; i < document.getElementById('file-upload').files.length; i++) {
                    $scope.filesTotalSize = document.getElementById('file-upload').files[i].size + $scope.filesTotalSize;
                }

文件上传服务

app.service('fileUpload', ['$http', '$log',
    function ($http, $log) {
        this.uploadFileToUrl = function (file, uploadUrl) {
            //$log.debug("file(s)");
            //$log.debug(file);
            var fd = new FormData();
            angular.forEach(file, function (value, key) {
                fd.append(key, value);
            });
            return $http.post(uploadUrl, fd, {
                transformRequest: angular.identity,
                headers: {
                    'Content-Type': undefined,
                    'enctype': "multipart/form-data"
                }
            })
        }; // uploadFileToUrl
    }]); // fileUpload

html

<div flow-init flow-files-submitted="$flow.upload()" class="ng-scope">
    <div flow-drop>
        <span for="file-upload"
              class="btn btn-primary" flow-btn style="margin-top: 10px; ">Upload File
            <input id="file-upload" type="file" multiple="multiple" file-model="sampleFile"
                   style="visibility: hidden; position: absolute;"></span>
        <p flow-prevent-drop
           flow-drag-enter="style={border: '5px dashed purple'}"
           flow-drag-leave="style={}"
           ng-style="style"
           style="margin-top: 10px;width: 100%;min-height: 50px;">
            Drag And Drop your file here</p>
        <br>
        <span ng-repeat="file in $flow.files track by $index">
        {{file.name + ", " }}
    </span>

        <div style="margin-left: 2px; margin-top: 10px;">
            <button id="file-upload-btn" class="btn btn-primary"
                    ng-click="showMask(); uploadFile();">
                Upload
            </button>
            <button class="btn btn-primary" style="float: right;"
                    ng-click="navigateTo('/startup')">
                Cancel
            </button>
            <button style="float: right; margin-right: 6px;" class="btn btn-primary"
                    ng-click="$flow.cancel()">
                Clear
            </button>
        </div>
    </div>
</div>

Answer 1

我只是在尝试类似的服务。获取文件的 Angular 数组，并将项目推送到 javascript“file-upload”.FileList 数组上，但没有运气，因为“files”属性是只读 FileList 对象。

预打包的解决方案: http://blueimp.github.io/jQuery-File-Upload/angularjs.html 并且它可以拖放到整个页面上工作。

这个:http://angular-file-upload.appspot.com/甚至可以在移动设备上粘贴和访问相机。

您将文件添加到 formData 的解决方案很好，并且与 jquery ajaxSubmit form code 内联。

也许你可以创建一个 Plnk合作...

formdata.append(a[i].name, a[i].value);