ajaxToolkit:AjaxFileUpload捕获文件描述

时间:2013-08-10 02:18:35

标签: c# asp.net ajaxcontroltoolkit

我正在尝试将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);

        }

1 个答案:

答案 0 :(得分:2)

让我们为每个上传的文件添加个别说明。为此,您需要从Codeplex下载AjaxControlToolkit源代码(这是一个下载链接:Latest toolkit sources并修改三个文件:

  1. AjaxFileUpload.Item.pre.js
  2. AjaxFileUpload.Control.pre.js
  3. AjaxFileUpload.css
  4. 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 已禁用,< strong>隐藏和销毁功能。完成这些更改后,每个文件项都将包含用于文件描述的单独文本框。

    之后,更改位 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 类定义中更改 heigh 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"];