1

私は剣道UIを初めて使用し、asp.net mvcアプリケーションでファイルアップロードプラグインを使用しています.すべてが夢のように機能します.しかし、追加の要件が1つあります. ファイルをアップロードするとき、画像ファイルに一意の画像 GUID を割り当て、アップロードしてからコールバック関数に戻ります。私のコードは次のとおりです。

<script type="text/javascript">
    $(document).ready(function () {
        $("#attachments").kendoUpload({
            async: {
                saveUrl: '@Url.Action("UploadBlogImages", "Blog")',
                removeUrl: '@Url.Action("Remove", "Blog")',
                autoUpload: true
            },
            success: function (data) {
                var imageGuids = data.response;
                $.each(imageGuids, function (index, imageGuid) {
                    $('#form_uploadPic').append('<input type="hidden" value=' + imageGuid + 'name="ImgGuid">');
                });
            }
        });
    });
</script>

ユーザーが削除ボタンをクリックしたときにファイルを削除する必要がありますが、私の問題は、デフォルトでは、削除ボタンがファイルの名前(アップロード時に使用された)を削除するファイル名として渡すことです.しかし、私は名前を変更していますサーバーにアップロードする前にファイル。ファイルに一意の GUID を割り当てています。その GUID を成功関数に返しました。ファイルを削除するために削除ボタンがその GUID をサーバーに渡すように構成するにはどうすればよいですか。

ありがとう、S

4

2 に答える 2

7

もう 1 つのオプションは、id をファイル オブジェクト自体に追加することです。そのため、onSuccess ハンドラーに次のように追加します。

function onUploadSuccess(e) {
    //add the id returned in the json from the upload server script
    e.files[0].id=e.response.id;
}

次に、削除ハンドラーで名前を id に変更します。

function onUploadRemove(e) {
    var files = e.files;
    for(i=0;i <files.length;i++){
            //replace the name with the id added to the object
        files[i].name=files[i].id;
    }
}

次のように設定します。

$("input[type='file']").kendoUpload(
    {
        async: {
            saveUrl: "url",
            removeUrl: "url",
            removeField: "files"
       },
        success: onUploadSuccess,
        remove: onUploadRemove
    }
);

最新の kendoUI で動作します

于 2012-08-24T14:16:32.917 に答える
3

興味深いシナリオ。現在、次の 2 つの方法があります。

  1. 成功したら、fileEntry を表す li 要素を見つけて、その data- fileNames* 属性を取得します。取得したオブジェクトのnameプロパティを、サーバーから取得した GUID 値に設定します。fileNamesこれは基本的に、剣道アップロード コントロールの削除機能で使用されるファイル名を更新します。(元のソースを入手できる場合は、メソッド removeUploadedFile と _submitRemove を探してください。これらはすべて非常に理にかなっています)

  2. よりクリーンな (やや) オプションは、成功した場合に、新しく追加された li 要素 (fileEntry) を見つけて、関連付けられた [削除] ボタン (クラス: k-upload-action) です。削除ボタンを取得したら、クリック イベントをフックして、独自のカスタム URL またはアップロード コントロールの removeUrl を呼び出し、アップロードの成功時に取得したファイル GUID を渡します。

于 2012-03-08T09:57:46.300 に答える