5

私はAjaxFileUploadコントロール、特にContextKeysプロパティを見始めました。ただ、使い方がわかりません。

ドキュメントには、ファイルがアップロードされたときにContextKeysを使用してサーバーに情報を渡すことがAjaxFileUploadに記載されています。ただし、例は提供されていません。私が見ることができるオンラインの例はありますか？

4

1 に答える 1

4

そのような機能は実装されていませんが（計画されていたと思いますが、何らかの理由で延期されました）、自分で実装することを妨げるものは何もありません。これを行うには、AjaxControlToolkitソースコードをダウンロードして、必要に応じて微調整する必要があります。

ポイントがたくさんあるので、前に一杯のコーヒーを準備するかもしれません:)

変更が必要なファイル名で変更を表示します。

Server / AjaxControlToolkit / AjaxFileUpload/AjaxFileUpload.csファイル

まず、ContextKeysプロパティをAjaxFileUploadEventArgs.csファイル（同じフォルダーにあります）に追加します。

/// <summary>
/// Gets or sets the context keys.
/// </summary>
public string ContextKeys
{
    get;
    set;
}

その後、AjaxFileUploadクラスコードを開き、OnPreRenderメソッドを変更します。カスタム変更を加えたこのメソッドの一部を次に示します。

var eventArgs = new AjaxFileUploadEventArgs(guid, AjaxFileUploadState.Success,
"Success", uploadedFile.FileName,
uploadedFile.ContentLength, uploadedFile.ContentType,
stream.ToArray());

// NEW CODE HERE
eventArgs.ContextKeys = this.Page.Request.Form["contextKeys"];

必要なサーバーコードの変更はこれですべてです。Sys.Extended.UI.AjaxFileUpload次に、クライアントクラス（ファイルAjaxFileUpload.pre.js）を変更する必要があります。

_html5UploadFileまず、メソッドを次のように変更しましょう。

_html5UploadFile: function (fileItem) {
    this._guid = Sys.Extended.UI.AjaxFileUpload.utils.generateGuid();

    var uploadableFile = fileItem.get_fileInputElement();

    var fd = new FormData();
    fd.append("fileId", uploadableFile.id);
    fd.append("Filedata", uploadableFile.file);

    if (this.contextKeys) {
        if (typeof this.contextKeys !== "string") {
            this.contextKeys = Sys.Serialization.JavaScriptSerializer.serialize(this.contextKeys);
        }
        fd.append("contextKeys", this.contextKeys);
    }

    $common.setVisible(this._progressBar, true);
    this._setDisableControls(true);
    this._html5SetPercent(0);
    this._setStatusMessage(String.format(Sys.Extended.UI.Resources.AjaxFileUpload_UploadingHtml5File, uploadableFile.file.name, Sys.Extended.UI.AjaxFileUpload.utils.sizeToString(uploadableFile.file.size)));

    var url = this._postBackUrl;
    if (url.indexOf("?") != -1)
        url += "&";
    else
        url += "?";

    this._webRequest = new Sys.Net.WebRequest();
    this._executor = new Sys.Net.XMLHttpExecutor();
    this._webRequest.set_url(url + 'contextkey=' + this._contextKey + '&guid=' + this._guid);
    this._webRequest.set_httpVerb("POST");
    this._webRequest.add_completed(this.bind(this._html5OnRequestCompleted, this));

    //this._executor.add_load(this.bind(this._html5OnComplete, this));
    this._executor.add_progress(this.bind(this._html5OnProgress, this));
    this._executor.add_uploadAbort(this.bind(this._html5OnAbort, this));
    this._executor.add_error(this.bind(this._html5OnError, this));
    this._webRequest.set_executor(this._executor);

    this._executor.executeRequest(fd);
}

上記のように、Ajaxリクエストで投稿されたフォームデータにcontextKeysを追加します。

_uploadInputElementメソッドを変更する必要があります。

_uploadInputElement: function (fileItem) {

    var inputElement = fileItem.get_fileInputElement();
    var uploader = this;
    uploader._guid = Sys.Extended.UI.AjaxFileUpload.utils.generateGuid();
    setTimeout(function () {
        uploader._setStatusMessage(String.format(Sys.Extended.UI.Resources.AjaxFileUpload_UploadingInputFile, Sys.Extended.UI.AjaxFileUpload.utils.getFileName(inputElement.value)));
        uploader._setDisableControls(true);
        uploader.setThrobber(true);
    }, 0);

    var url = uploader._postBackUrl;
    if (url.indexOf("?") != -1)
        url += "&";
    else
        url += "?";

    uploader._createVForm();
    uploader._vForm.appendChild(inputElement);

    if (this.contextKeys) {
        if (typeof this.contextKeys !== "string") {
            this.contextKeys = Sys.Serialization.JavaScriptSerializer.serialize(this.contextKeys);
        }

        var contextKeysInput = document.createElement("input");
        contextKeysInput.setAttribute("type", "hidden");
        contextKeysInput.setAttribute("name", "contextKeys");
        contextKeysInput.setAttribute("value", this.contextKeys);

        uploader._vForm.appendChild(contextKeysInput);
    }

    uploader._vForm.action = url + 'contextkey=' + this._contextKey + '&guid=' + this._guid;
    uploader._vForm.target = uploader._iframeName;

    setTimeout(function () {
        uploader._vForm.submit();
        uploader._waitTimer = setTimeout(function () { uploader._wait() }, 100);
    }, 0);
}

これらすべての変更の後、コードビハインドでContextKeysプロパティを設定しAjaxFileUploadEventArgs、以下のようにUploadCompleteイベントの引数から値を取得できます。

protected void Page_Load(object sender, EventArgs e)
{

    if (!IsPostBack && !AjaxFileUpload1.IsInFileUploadPostBack)
    {
        AjaxFileUpload1.ContextKeys = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(new Dictionary<string, string> { { "1", "First" }, { "2", "Second" } });
    }

protected void AjaxFileUpload1_OnUploadComplete(object sender, AjaxFileUploadEventArgs file)
{
    if (!string.IsNullOrEmpty(file.ContextKeys))
    {
        var contextKeys = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<Dictionary<string, string>>(file.ContextKeys);
    }

また、OnClientUploadStartedここで提案されているリンクでクライアント側のイベントを実装する場合は、クライアントからコンテキストキーをサーバーに渡すことができます。

 function uploadStarted(sender, args) {
      sender.contextKeys = { "first": "1", "second": "2" };
 }
于 2012-10-26T09:21:12.587 に答える