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“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);

使用FileList拖放AngularJs

1 个答案: