使用FileList拖放AngularJs

Question

我是一个非常新手的前端开发，我认为这将是很酷的添加拖放到当前的上传页面。但是，在开始使用ng-flow (一个帮助拖放的指令)连接所有内容之后，我似乎无法理解如何将文件添加到文件列表中。如果您认为我甚至不需要这个指令，并且只是夸大了这一点，并且有一个更简单的解决方案，我也愿意做出改变。注意:我只给出了代码的示例，所以不要因为没有编译而使用它！

fileModelDirective：

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

fileMethod

  $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;
                }

fileUpload服务

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的“文件上传”文件数组中，但不走运，因为‘.FileList’属性是一个只读的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);