ajaxToolkit：AjaxFileUpload捕获文件说明 [英] ajaxToolkit:AjaxFileUpload capture file description
本文介绍了ajaxToolkit：AjaxFileUpload捕获文件说明的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图让FileDescription的asp：文本框保存到数据库，当用户点击上传，但它回来的空白。我究竟做错了什么？
这是我upload.aspx文件
＆LT; ajaxToolkit：AjaxFileUpload ID =AjaxFileUpload1
ThrobberID =myThrobberOnUploadComplete =AjaxFileUpload1_UploadComplete
ContextKeys =
AllowedFileTypes =JPG，JPEG，DOC，XLS
MaximumNumberOfFiles =1
=服务器/＆GT;
＆LT; / DIV＆GT; 文件描述＆LT; ASP：文本框ID =FileDescriptionWIDTH =200=服务器＆GT;＆LT; / ASP：文本框＆GT;这是我upload.cs文件
保护无效AjaxFileUpload1_UploadComplete（对象发件人，AjaxControlToolkit.AjaxFileUploadEventArgs E）
{
字符串sFileDescription = FileDescription.Text;
字符串文件路径=〜/+ e.FileName;
AjaxFileUpload1.SaveAs（文件路径）; }
解决方案
让我们添加个人描述为每个上传的文件。要做到这一点，你需要从codePLEX下载AjaxControlToolkit源（这里是下载链接：最新工具包的来源并修改三个文件：
在AjaxFileUpload.Item pre.js文件的新内容：
///＆lt;参考路径=../../../客户端/ microsoftajax.extended /普通/普通pre.js/＆GT;Type.registerNamespace（Sys.Extended.UI.AjaxFileUpload）;
Type.registerNamespace（AjaxFileUpload）;Sys.Extended.UI.AjaxFileUpload.Item =功能（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：功能（onRemoveItem）{ VAR自我=这一点，文件= this._inputElementValue，utils的=新Sys.Extended.UI.AjaxFileUpload.Utils（）
isHtml5Support = utils.checkHtml5BrowserSupport（）， //生成唯一的ID为每个项目
ID = this._id， //创建行项目的容器
容器= $ common.createElementFromTemplate（{
节点名称：分区，
属性：{
ID：this._parentId +'_FileItemContainer_'+ ID，
}，
cssClasses：['ajax__fileupload_fileItemInfo']
}）， //创建文件信息/状态容器
fileInfoContainer = $ common.createElementFromTemplate（{
节点名称：分区，
属性：{
ID：this._parentId +'_FileInfoContainer_'+ ID，
风格：{
显示：'inline-block的'
}
}
}）， //创建文件信息占位符
fileInfoText = $ common.createElementFromTemplate（{
节点名称：跨越，
属性：{
ID：this._parentId +'_FileItemInfo_'+ ID
}，
cssClasses：['ajax__fileupload_fileItemInfo']
}）， //创建文件状态占位符
fileStatusText = $ common.createElementFromTemplate（{
节点名称：跨越，
属性：{
ID：this._parentId +'_FileItemStatus_'+ ID
}，
cssClasses：['uploadstatus']
}）， commentContainer = $ common.createElementFromTemplate（{
节点名称：'格'，
cssClasses：['ajax__fileupload_fileItem_commentContainer']
}）， fileComment = $ common.createElementFromTemplate（{
节点名称：输入，
属性：{
ID：this._parentId +'_FileItemComment_'+ ID，
类型：'文字'，
风格：{
宽度：'100％'
}
}，
cssClasses：['ajax__fileupload_fileItem_commentInput']
}）， //初始化删除按钮
deleteButton = $ common.createElementFromTemplate（{
节点名称：分区，
属性：{
ID：this._parentId +'_FileItemDeleteButton_'+ ID
}，
cssClasses：['removeButton']
}）; this._fileName = utils.getFileName（文件）; 如果（isHtml5Support）{
this._fileSize = file.size;
VAR FTYPE = file.type？ '＆LT;跨度类=文件类型＆GT;（'+ file.type +'）LT; / SPAN＆GT;' ：'';
fileInfoText.innerHTML ='＆LT;跨度类=文件名＆GT;' + this._fileName +'＆LT; / SPAN＆GT;
+ FTYPE
+' - ＆LT;跨度类=文件大小＆GT;' + utils.sizeToString（file.size）+'＆LT; / SPAN＆GT; ';
this._fileType = file.type;
}其他{ fileInfoText.innerHTML ='＆LT;跨度类=文件名＆GT;' + this._fileName +'＆LT; / SPAN＆GT;';
this._fileType = utils.getFileType（文件）;
} commentContainer.innerHTML ='＆LT;标签类=ajax__fileupload_fileItem_commentLabel为=+ this._parentId +'_FileItemComment_'+ ID +'＆GT;简介：＆LT; /标签＆gt;，
commentContainer.appendChild（fileComment）; fileInfoContainer.appendChild（fileInfoText）;
fileInfoContainer.appendChild（fileStatusText）;
fileInfoContainer.appendChild（commentContainer）; $ common.setText（deleteButton，Sys.Extended.UI.Resources.AjaxFileUpload_Remove）;
$ addHandlers（deleteButton，{
点击：Function.createDelegate（这一点，函数（）{
onRemoveItem（个体经营）;
}）
}）; //建行项目
如果（Sys.Browser.agent == Sys.Browser.InternetExplorer＆放大器;＆安培; Sys.Browser.version＆LT; = 8）{
container.appendChild（deleteButton）;
container.appendChild（fileInfoContainer）;
}
其他{
container.appendChild（fileInfoContainer）;
container.appendChild（deleteButton）;
}
this._fileInfoContainer = fileInfoContainer;
this._deleteButton = deleteButton;
this._fileStatusText = fileStatusText;
this._fileComment = fileComment; 返回容器中;
}， setStatus：功能（fileStatusText，文字）{
$ common.setText（this._fileStatusText，'（'+文字+'）'）;
this._fileInfoContainer.setAttribute（类，fileStatusText +'国'）;
}， 禁用：功能（上）{
如果（上）
this._deleteButton.disabled = this._fileComment.disabled =已禁用;
其他
this._deleteButton.disabled = this._fileComment.disabled ='';
}， 隐藏：功能（）{
this._deleteButton.style.visibility ='隐藏';
this._fileComment.readOnly = TRUE;
}， 破坏：功能（）{
$ common.removeElement（this._inputElementValue）;
$ common.removeElement（this._deleteButton）;
$ common.removeElement（this._fileComment）;
$ common.removeElement（this._ui）;
}， get_inputElementValue：功能（）{
返回this._inputElementValue;
}， appendNodeTo：函数（父）{
parent.appendChild（this._ui）;
}， removeNodeFrom：函数（父）{
parent.removeChild（this._ui）;
}， get_fileComment：功能（）{
返回this._fileComment.value;
}
};
在此code增加了新的类别字段的 _fileComment ，新功能的 get_fileComment 并修改 initUI 禁用，隐藏和摧毁的功能。这些更改后，每个文件的项目将有单独的文本文件的说明。
在此之后，改了一下 AjaxFileUpload.Control。pre.js 文件。改写如下的 doneAndUploadNextFile 功能：
doneAndUploadNextFile：功能（的FileItem）{
///＆LT;总结＆gt;
///马克的FileItem中上载，并上传下一个文件在队列中。
///＆LT; /总结＆gt;
///＆LT; PARAM NAME =的FileItem＆GT;上传的文件＆LT; /参数＆GT; //将消息发送到服务器来完成此上传
VAR XHR =新XMLHtt prequest（）
自=这一点; xhr.open（POST，+ this._contextKey +contextKey =？，＆安培;完成= 1＆安培; GUID =+ fileItem._id +＆安培;评论=+ fileItem.get_fileComment（），TRUE）;
xhr.onreadystatechange =功能（E）{
如果（xhr.readyState == 4）{
如果（xhr.status == 200）{ //标记为已完成，并调用事件处理程序
self.raiseUploadComplete（Sys.Serialization.JavaScriptSerializer.deserialize（xhr.responseText））; //上传下一个文件
self._processor.startUpload（）; }其他{
//结束写入错误。下一个文件将不被上传。
self.setFileStatus（的FileItem，'错误'，Sys.Extended.UI.Resources.AjaxFileUpload_error）;
self.raiseUploadError（XHR）;
抛出错误募集上传完成事件，并启动新的上传;
}
}
};
xhr.send（NULL）;
}
和的最后一个步骤是一个AjaxFileUpload.css文件。更改 HEIGH CSS在激怒 .ajax__fileupload_fileItemInfo 类的定义，并添加三个额外的类描述：
.ajax__fileupload_fileItemInfo {
行高：20像素;
高度：44px;
保证金底：2px的;
溢出：隐藏;
}.ajax__fileupload_fileItem_commentContainer {
显示：表;
宽度：100％;
}.ajax__fileupload_fileItem_commentLabel {
显示：表细胞;
宽度：1px的;
空格：NOWRAP;
填充右：5像素;
}.ajax__fileupload_fileItem_commentInput {
显示：表细胞;
宽度：100％;
}
这些更改后重建工具包解决方案，并使用自定义的DLL。
现在，你可以得到由发布查询字符串描述的 OnUploadComplete 事件处理程序： VAR评论=的Request.QueryString [意见];
I'm trying to get the FileDescription asp:textbox to save into a db when the user clicks upload but it's coming back blank. what am I doing wrong?
this is in my upload.aspx file
<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);
}
解决方案
Let's add individual descriptions for each uploaded file. To do this you need to download AjaxControlToolkit sources from Codeplex (here is a link to download: Latest toolkit sources and modify three files:
New content of the AjaxFileUpload.Item.pre.js file:
/// <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;
}
};
In this code added new class field _fileComment, new function get_fileComment and modified initUI, disabled, hide and destroy functions. After these changes, each file item will have individual textbox for file description.
After that, change a bit AjaxFileUpload.Control.pre.js file. Rewrite the doneAndUploadNextFile function as below:
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);
}
And the last step is a AjaxFileUpload.css file. Change heigh css rile in .ajax__fileupload_fileItemInfo class definition and add three additional classes for description:
.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%;
}
After these changes rebuild toolkit solution and use custom dlls.
Now you can get posted description from query string in OnUploadComplete event handler: var comment = Request.QueryString["comment"];
这篇关于ajaxToolkit：AjaxFileUpload捕获文件说明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
