12

私は現在、MVC3 と Razor と Entity Framework を使用してファイルを DB にアップロードするために Kendo UI を使用しています。単一のアップロードのみを許可するように制限する必要がある場合を除いて、サイトのいくつかの領域でうまく機能しています. 複数の選択を禁止する必要がある複数を false に設定していますが、ユーザーはファイルを追加するために選択ボタンを何度でもクリックでき、DB のこのフィールドの要件に違反しています。

彼らのサイトで見つけたと思われるいくつかの提案を試みましたが、アップロードリスト全体ではなく、現在のリクエストで送信された現在選択されているアイテムを参照しています (下の画像を参照)。

<script type="text/javascript">
  function singleFile(e) {
    var files = e.files;
    if (e.files.length > 1) {
      alert('Only one file may be uploaded, cancelling operation...');
      e.preventDefault();
    }
  }
</script>

@(Html.Kendo().Upload()
  .Name("resumeAttachments")
  .Multiple(false)
  .Async(async => async
      .Save("ResumeSave", "File")
  )
  .Events(c => c
      .Upload("resumeOnUpload")
  )
  .Events(c => c
      .Success("resumeOnSuccess")
  )
  .Events(c => c
      .Complete("singleFile")
  )
)

ファイルリスト - 複数のファイルを個別にアップロードできるようになりました

4

5 に答える 5

10

複数のアップロードを防止する要件を与えられた後、このページに出くわしました。
"multiple" を FALSE に設定すると、正しく行われれば問題なく動作します。

( Kendo Razor 構文を使用することはできますが、ページ ソースを表示すると、 .Kendo () が実際に .kendoUpload に変換されることに注意してください。

したがって、私は JavaScript でこの構文を好みます(@using の後):

@using Kendo.Mvc.UI;

<script type="text/javascript">

$(document).ready(function() {
    $("#files").kendoUpload({"multiple":false,
        async: {
            saveUrl: '@Url.Action("Save", "Upload", new { typeOfUploadedFile= @Model.DocName.ToString(), @proposalNo = @Model.ProposalNo.ToString(),  area = ""})',
            removeUrl: '@Url.Action("Remove", "Upload")',
            autoUpload: true
        }
    });
});   

</script>
于 2013-07-10T07:44:39.030 に答える
5

週末 (そしてリラックスするための長い休暇) について少し考えた後、私は思いつきました... singleFile 関数を次のように変更すると、ファイルがアップロードされた後にコントロールが無効になります。

function singleFile(e) {
  var upload = $("#resumeAttachments").data("kendoUpload");

  // disables the upload after upload
  upload.disable();
}
于 2013-04-17T15:59:24.290 に答える
1

これが非常に古いスレッドであることは承知していますが、私たちが遭遇した問題についても投稿したいと思います。非同期アップロードで複数を追加すると、以下の単純なコードで機能します

$("#files").kendoUpload({
                        multiple : false,
                        async : {
                                saveUrl : FileUploadURL,
                                removeUrl : FileRemoveURL,
                                autoUpload : true
                                },
                        remove : onRemove,
                        success : onSuccess
                        });

ただし、以前に選択したファイルのアップロードがまだ進行中のときにユーザーが別のファイルを選択すると、フロントページからは以前に選択したファイルが削除されたように見えますが、実際には以前のファイルのアップロードです。つまり、いずれにせよファイルはサーバーにアップロードされ、removeUrl をトリガーして未使用のファイルを削除する機会がなく、もちろん追加の帯域幅を消費します。

この問題を回避するためにこれまでに行ったことは、onRemove イベント ハンドラーに小さな処理を追加することです。これにより、clearFileByUid を呼び出してアップロードを停止します。

function onRemove(e) {
        for(var removedFileId of getFileId(e)){
            //All in progress file should be stopped!
            var fileEntry=$('.k-file-progress[' + kendo.attr('uid') + '="' + removedFileId + '"]', this.wrapper)
            if(fileEntry!=null&&fileEntry.length>0){this.clearFileByUid(removedFileId);}
        }

}
function getFileId(e) {
        return $.map(e.files, function(file) {
                var fileId = file.uid;
                return fileId;
                });
}
于 2019-04-13T12:49:44.873 に答える
0

また、次を追加します。

var dropzone = $(".k-dropzone").addClass("hide");

singleFile() 関数に追加すると、アップロードが完了した後に選択ボタンが非表示になり、アップロードできないという非常にリアルな印象が与えられます。

.hide {
  display: none; }

cssのどこかに定義されています。

于 2013-04-18T14:46:03.320 に答える