2

Angular-Wakanda でもファイル アップロード オン ドロップを追加しようとしていますが、どこから始めればよいかわかりません...

ファイル入力要素を使用した画像アップロード ( https://wakanda.github.io/angular-wakanda/#/doc/developer-guide/image-upload ) は機能していますが、アップロード後にサーバー側でファイルを処理したいと考えています。 : ファイルをサーバー ディレクトリにアップロードし、ファイルが正常にアップロードされた後にサーバー メソッドを呼び出すことを意味します。

どこから始めるべきかの例や方向性は高く評価されます。

4

3 に答える 3

1

HTML 要素にドラッグアンドドロップのサポートを追加するには、上記の回答に次のコードを追加します: https://stackoverflow.com/a/37348103/4685398

ドロップされたファイルの検証を に追加しますuploadFiles()。dropppedFiles使用がない場合fileInputs:

    // file upload
    $scope.uploadFiles = function(droppedFiles) {
        return new Promise(function(resolve, refuse) {
            var fileInputs = $('input[type="file"]');
            var formData = new FormData();
            var atLeastOneFile = false;

            // validate if dropzone or file input
            if (droppedFiles) {
                for (var i = 0; i < droppedFiles.length; i++) {
                    formData.append('dropzone', droppedFiles[i], droppedFiles[i].name);
                    atLeastOneFile = true;
                };
            }
            else {
                fileInputs.each(function(index, value) {
                    if (this.files.length !== 0) {
                        formData.append('form', this.files[0], this.files[0].name);
                        atLeastOneFile = true;
                    }
                });
            }
            if (atLeastOneFile) {
                $.ajax({
                    url: '/uploadFile',
                    type: 'POST',
                    processData: false, // important
                    contentType: false, // important
                    dataType: 'json',
                    data: formData,
                    success: function(evt) {
                        resolve(true);
                    }
                });
            }
            else {
                resolve(true);
            }
        });
    };

dropイベントを dropzone に追加uploadFiles(e.originalEvent.dataTransfer.files)し、ドロップされたファイルで呼び出します。

    // dropzone for file upload
    $("#drop-box").on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
            e.preventDefault();
            e.stopPropagation();
        })
        .on('dragover dragenter', function() {
            $(this).addClass('is-dragover');
        })
        .on('dragleave dragend drop', function() {
            $(this).removeClass('is-dragover');
        })
        .on('drop', function(e) {
            $scope.uploadFiles(e.originalEvent.dataTransfer.files);
        });
于 2016-05-23T11:18:47.620 に答える
0

必要に応じて、属性イベントを使用 して、検証または保存イベントを試すことができます。ファイルを保存する前にメソッドをトリガーできます。

于 2016-05-19T13:57:53.810 に答える