1

当用户单击上传时，我试图将 FileDescription asp:textbox 保存到数据库中，但它返回空白。我究竟做错了什么？

这是在我的 upload.aspx 文件中

     <ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload1"
        ThrobberID="myThrobber" OnUploadComplete="AjaxFileUpload1_UploadComplete"
        ContextKeys=""
        AllowedFileTypes="jpg,jpeg,doc,xls"
        MaximumNumberOfFiles="1"
        runat="server"/>   
        </div>

        File Description<asp:TextBox ID="FileDescription" Width="200" runat="server" ></asp:TextBox>

and this is in my upload.cs file
    protected void AjaxFileUpload1_UploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
        {
            string sFileDescription = FileDescription.Text;
            string filePath = "~/" + e.FileName;
            AjaxFileUpload1.SaveAs(filePath);

        }
4

1 回答 1

2

让我们为每个上传的文件添加单独的描述。为此，您需要从 Codeplex 下载 AjaxControlToolkit 源（这里有一个下载链接：最新工具包源并修改三个文件：

  1. AjaxFileUpload.Item.pre.js
  2. AjaxFileUpload.C​​ontrol.pre.js
  3. AjaxFileUpload.css

AjaxFileUpload.Item.pre.js 文件的新内容：

/// <reference path="../../../client/microsoftajax.extended/common/common.pre.js" />

Type.registerNamespace("Sys.Extended.UI.AjaxFileUpload");
Type.registerNamespace("AjaxFileUpload");

Sys.Extended.UI.AjaxFileUpload.Item = function (parentId, fileItem, onRemoveItem) {
    this._deleteButton = null;
    this._parentId = parentId;
    this._inputElementValue = fileItem.value;
    this._id = fileItem.id;
    this._slices = fileItem.slices;
    this._sliceIndex = 0;

    this._fileInfoContainer = null;
    this._fileStatusText = null;
    this._isUploaded = false;
    this._isUploading = false;
    this._fileSize = 0;
    this._fileName = "";
    this._fileType = "";
    this._bytesUploaded = 0;

    this._fileComment = null;

    this._ui = this.initUI(onRemoveItem);
};

Sys.Extended.UI.AjaxFileUpload.Item.prototype = {
    initUI: function (onRemoveItem) {

        var self = this, file = this._inputElementValue, utils = new Sys.Extended.UI.AjaxFileUpload.Utils(),
            isHtml5Support = utils.checkHtml5BrowserSupport(),

            // generate unique id for each item
            id = this._id,

            // create line item container
            container = $common.createElementFromTemplate({
                nodeName: "div",
                properties: {
                    id: this._parentId + '_FileItemContainer_' + id,
                },
                cssClasses: ['ajax__fileupload_fileItemInfo']
            }),

            // create file info/status container
            fileInfoContainer = $common.createElementFromTemplate({
                nodeName: "div",
                properties: {
                    id: this._parentId + '_FileInfoContainer_' + id,
                    style: {
                        display: 'inline-block'
                    }
                }
            }),

            // create file info placeholder
            fileInfoText = $common.createElementFromTemplate({
                nodeName: "span",
                properties: {
                    id: this._parentId + '_FileItemInfo_' + id
                },
                cssClasses: ['ajax__fileupload_fileItemInfo']
            }),

            // create file status placeholder
            fileStatusText = $common.createElementFromTemplate({
                nodeName: "span",
                properties: {
                    id: this._parentId + '_FileItemStatus_' + id
                },
                cssClasses: ['uploadstatus']
            }),

            commentContainer = $common.createElementFromTemplate({
                nodeName: 'div',
                cssClasses: ['ajax__fileupload_fileItem_commentContainer']
            }),

            fileComment = $common.createElementFromTemplate({
                nodeName: "input",
                properties: {
                    id: this._parentId + '_FileItemComment_' + id,
                    type: 'text',
                    style: {
                        width: '100%'
                    }
                },
                cssClasses: ['ajax__fileupload_fileItem_commentInput']
            }),

            // init remove button
            deleteButton = $common.createElementFromTemplate({
                nodeName: "div",
                properties: {
                    id: this._parentId + '_FileItemDeleteButton_' + id
                },
                cssClasses: ['removeButton']
            });

        this._fileName = utils.getFileName(file);

        if (isHtml5Support) {
            this._fileSize = file.size;
            var fType = file.type ? '<span class="filetype">(' + file.type + ')</span>' : '';
            fileInfoText.innerHTML = '<span class="filename">' + this._fileName + '</span> '
                + fType
                + ' - <span class="filesize">' + utils.sizeToString(file.size) + '</span> ';
            this._fileType = file.type;
        } else {

            fileInfoText.innerHTML = '<span class="filename">' + this._fileName + '</span>';
            this._fileType = utils.getFileType(file);
        }

        commentContainer.innerHTML = '<label class="ajax__fileupload_fileItem_commentLabel" for="' + this._parentId + '_FileItemComment_' + id + '">Description:</label>';
        commentContainer.appendChild(fileComment);

        fileInfoContainer.appendChild(fileInfoText);
        fileInfoContainer.appendChild(fileStatusText);
        fileInfoContainer.appendChild(commentContainer);

        $common.setText(deleteButton, Sys.Extended.UI.Resources.AjaxFileUpload_Remove);
        $addHandlers(deleteButton, {
            'click': Function.createDelegate(this, function () {
                onRemoveItem(self);
            })
        });

        // build the line item
        if (Sys.Browser.agent == Sys.Browser.InternetExplorer && Sys.Browser.version <= 8) {
            container.appendChild(deleteButton);
            container.appendChild(fileInfoContainer);
        }
        else {
            container.appendChild(fileInfoContainer);
            container.appendChild(deleteButton);
        }


        this._fileInfoContainer = fileInfoContainer;
        this._deleteButton = deleteButton;
        this._fileStatusText = fileStatusText;
        this._fileComment = fileComment;

        return container;
    },

    setStatus: function (fileStatusText, text) {
        $common.setText(this._fileStatusText, ' (' + text + ')');
        this._fileInfoContainer.setAttribute('class', fileStatusText + 'State');
    },

    disabled: function (on) {
        if (on)
            this._deleteButton.disabled = this._fileComment.disabled = 'disabled';
        else
            this._deleteButton.disabled = this._fileComment.disabled = '';
    },

    hide: function () {
        this._deleteButton.style.visibility =  'hidden';
        this._fileComment.readOnly = true;
    },

    destroy: function () {
        $common.removeElement(this._inputElementValue);
        $common.removeElement(this._deleteButton);
        $common.removeElement(this._fileComment);
        $common.removeElement(this._ui);
    },

    get_inputElementValue: function () {
        return this._inputElementValue;
    },

    appendNodeTo: function (parent) {
        parent.appendChild(this._ui);
    },

    removeNodeFrom: function (parent) {
        parent.removeChild(this._ui);
    },

    get_fileComment: function () {
        return this._fileComment.value;
    }
};

在此代码中添加了新的类字段_fileComment、新函数get_fileComment并修改了 initUI、disabled、hide和destroy函数。在这些更改之后，每个文件项将有单独的文件描述文本框。

之后，更改一点AjaxFileUpload.C​​ontrol.pre.js文件。重写doneAndUploadNextFile函数如下：

doneAndUploadNextFile: function (fileItem) {
    /// <summary>
    /// Mark fileItem as uploaded, and upload next file in queue.
    /// </summary>
    /// <param name="fileItem">Uploaded File</param>

    // send message to server to finalize this upload
    var xhr = new XMLHttpRequest(),
        self = this;

    xhr.open("POST", "?contextKey="+ this._contextKey +"&done=1&guid=" + fileItem._id + "&comment=" + fileItem.get_fileComment(), true);
    xhr.onreadystatechange = function (e) {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {

                // Mark as done and invoke event handler
                self.raiseUploadComplete(Sys.Serialization.JavaScriptSerializer.deserialize(xhr.responseText));

                // Upload next file
                self._processor.startUpload();

            } else {
                // finalizing is error. next file will not be uploaded.
                self.setFileStatus(fileItem, 'error', Sys.Extended.UI.Resources.AjaxFileUpload_error);
                self.raiseUploadError(xhr);
                throw "error raising upload complete event and start new upload";
            }
        }
    };
    xhr.send(null);
}

最后一步是 AjaxFileUpload.css 文件。在.ajax__fileupload_fileItemInfo类定义中更改高度css rile并添加三个附加类进行描述：

.ajax__fileupload_fileItemInfo {
    line-height: 20px;
    height: 44px;
    margin-bottom: 2px;
    overflow: hidden;
}

.ajax__fileupload_fileItem_commentContainer {
    display: table;
    width: 100%;
}

.ajax__fileupload_fileItem_commentLabel {
    display: table-cell;
    width: 1px;
    white-space: nowrap;
    padding-right: 5px;
}

.ajax__fileupload_fileItem_commentInput {
    display: table-cell;
    width: 100%;
}

在这些更改之后重建工具包解决方案并使用自定义 dll。现在您可以从OnUploadComplete事件处理程序中的查询字符串获取发布的描述：var comment = Request.QueryString["comment"];

于 2013-08-11T18:25:51.823 回答