Question

我到处搜索，找到了一些解决方案，但是就我而言，这些解决方案都没有帮助我。我有一个可以单击的上传按钮，我希望它也能够拖动文件进行上传。

HTML：

        <div style="margin-top: 0px; width: 45%"  ng-model="files" class="drop-box" onclick="document.getElementById('step-image-upload').click()" ng-disabled="instruction.locked || uploading">
            <p>Drop image files<br/></br/>or click to upload</p>
        </div>

javascript +角度： $

scope.fileSelected = function(files)
    {
        var promises = [];
        $scope.uploading = true;

        uploadService.uploadMultiple(files)
        .then(function(images)
        {
            if(!images)
            {
                return $q.reject();
            }

            images.forEach(function(image)
            {
                image.highlightAreas = [];
                promises.push($scope.selected.step.addImage(image)
                .then(function()
                {
                    return $q.resolve(image);
                }));
            });

            return $q.all(promises);
        })
        .then(function(images)
        {
            var promises = [];
            var newImageNumber = $scope.selected.step.images.length;

            images.forEach(function(image, index)
            {
                promises.push(ImageExtension.createLinked({
                    imageNumber: newImageNumber + index,
                    caption: ""
                },
                image)
                .then(function(imageExtension)
                {
                    image.imageExtension = imageExtension;
                    return $q.resolve(true);
                }));
            });

            return $q.all(promises);
        })
        .then(function()
        {
            $scope.uploading = false;
        })
        .catch(function()
        {
            $scope.uploading = false;
            toastService.toastTranslation("CLIENT.EDIT.STEP.UPLOAD_ERROR");
        });

    };

obs：我只需要拖动它并从中获取数据，这样我就可以调用该文件并使用已经完成的功能。

Answer 1

好吧，如果有人需要这个，这是我如何解决我的问题：使用模块ng-file-upload（https://www.npmjs.com/package/ng-file-upload） HTML：

<div ngf-drop="dragDrop($file)" ngf-select="fileSelected($files)" ng-model="file" class="drop-box" ngf-drag-over-class="'dragover'" ngf-multiple="true" ngf-allow-dir="true" accept="image/*,application/pdf" ngf-pattern="'image/*,application/pdf'" ngf-drop="upload($file)" style="width:45%; cursor: pointer">

每当将文件放入框中时，ngf-drop =“ dragDrop（$ file）”中的

都会触发函数拖放。点击ngf-select =“ fileSelected（$ files）”会触发您的文件夹进行搜索以上传文件

Javascript：

    $scope.dragDrop = function(file) 
    {
        var files = [
            file
        ];
}

和

    $scope.fileSelected = function(file)
    {
         var files = [file];
}

希望这对其他人有用。

拖曳并上载

1 个答案: