kendo uiファイルアップロードプラグイン削除ボタンカスタマイズ
-
09-12-2019 - |
質問
私はKendo Uiに慣れていて、私は私のASP.NET MVCアプリケーションでファイルアップロードプラグインを使用しています。ファイルをアップロードしているとき、私はイメージファイルに固有のイメージ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>
.
ユーザーが削除ボタンをクリックするとファイルを削除する必要がありますが、問題は デフォルトでは、[削除]ボタンはファイル名を削除するファイル名としてファイルの名前(アップロード時に使用されました)を渡します。 server.iにアップロードする前にファイルの名前を変更する.ifile.iに固有のGUIDを割り当てています。
ありがとう、 s
解決
興味深いシナリオ。今それを行く2つの方法があります:
-
FileEStryを表すLI要素を見つけて、
fileNames
data- *属性を取得します。取得したname
オブジェクトのfileNames
オブジェクトをサーバーから戻ってきたGUID値に設定します。これにより、剣道アップロードコントロールの除外機能によって使用されるファイル名が更新されます。(元のソースに手を差し伸べる場合は、メソッドremother載置ファイルと_SubMitreMoveを探してください。すべてが多くの意味があります) -
クリーナー(やや)オプションは、成功した場合、新しく追加されたLI要素(FileEntry)を見つけて、それに関連付けられている「削除」ボタン(クラス:kアップロードアクション)です。削除ボタンを開いたら、アップロードコントロールのClickURLまたはUploadコントロールのRemoveURLを呼び出して、アップロードの成功を取得したファイルGUIDを渡します。
他のヒント
別のオプションは、ファイルオブジェクト自体に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