上传表单(Upload Forms)[ASP.NET版]

Posted 周一, 07/07/2008 - 13:53 by admin

ExtJs的文件上传功能官方的例子中并没有，但做网站的都知道，这个功能在十个系统中九个可能都需要这样的功能。废话少说，下面一起来分享一下ExtJs上传文件功能。

为了更方便asp.net的会员，于是写了这一篇ASP.NET版本的。PHP程序员请查看上传表单(Upload Forms)[PHP版]。

演示(demo)地址在文章最后.

效果图1（上传前）：

/screen_capture/demo/8.3_upload_forms_1.jpg

效果图2（上传后）：

/screen_capture/demo/8.3_upload_forms_2.jpg

该程序包括三个文件，一个文件件。如下图

/screen_capture/demo/8.3_upload_forms_3.jpg

源代码：
upload_csharp.html

<html>
<head>
    <title>Uploading</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>

    <!-- GC -->
    <!-- LIBS -->
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <!-- ENDLIBS -->

    <script type="text/javascript" src="../../ext-all.js"></script>

    <script type="text/javascript" src="upload_csharp.js"></script>
    <link rel="stylesheet" type="text/css" href="forms.css"/>

    <!-- Common Styles for the examples -->
    <link rel="stylesheet" type="text/css" href="../examples.css"/>
</head>
<body>
<script type="text/javascript" src="../examples.js"></script>
<!-- EXAMPLES -->
<h1>Upload with Forms</h1>

<p>The js is not minified so it is readable. See 
<a href="upload_csharp.js">upload_csharp.js</a>.</p>
<p> </p>
<p><a href="javascript:window.location.reload();">reload</a></p>
</body>
</html>

upload_csharp.js

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side'; 
Ext.onReady(function() {
	var form = new Ext.form.FormPanel({
		baseCls: 'x-plain',
		labelWidth: 80,
		url:'upload_csharp.aspx',
		fileUpload:true,
		defaultType: 'textfield',

		items: [{
			xtype: 'textfield',
			fieldLabel: 'File Name',
			name: 'userfile',
			inputType: 'file',
			allowBlank: false,
			blankText: 'File can\'t not empty.',
			anchor: '90%'  // anchor width by percentage
		}]
	});

	var win = new Ext.Window({
		title: 'Upload file',
		width: 400,
		height:200,
		minWidth: 300,
		minHeight: 100,
		layout: 'fit',
		plain:true,
		bodyStyle:'padding:5px;',
		buttonAlign:'center',
		items: form,

		buttons: [{
			text: 'Upload',
			handler: function() {
				if(form.form.isValid()){
					Ext.MessageBox.show({
						   title: 'Please wait',
						   msg: 'Uploading...',
						   progressText: '',
						   width:300,
						   progress:true,
						   closable:false,
						   animEl: 'loding'
					   });
					form.getForm().submit({    
						success: function(form, action){
						   Ext.Msg.alert('Message from extjs.org.cn',action.result.msg);
						   win.hide();  
						},    
					   failure: function(){    
						  Ext.Msg.alert('Error', 'File upload failure.');    
					   }
					})		       
				}
		   }
		},{
			text: 'Close',
			handler:function(){win.hide();}
		}]
	});
	win.show();
});

upload_csharp.aspx

<%@ Page Language="C#" %>

<script runat="server">
public void Page_Load(object sender, System.EventArgs e)
{
  /// 在此处放置用户代码以初始化页面
  //if (this.IsPostBack) 
    if(this.SaveFiles())
        Response.Write("{success:true,msg:'File was successfully uploaded.'}");
    else
        Response.Write("{success:true,msg:'Possible file upload attack!'}");
}

public Boolean SaveFiles()
{
      ///'遍历File表单元素
      HttpFileCollection files  = HttpContext.Current.Request.Files;
      try
      {
        for(int iFile = 0; iFile < files.Count; iFile++)
        {
          ///'检查文件扩展名字
          HttpPostedFile postedFile = files[iFile];
          string fileName, fileExtension;
          fileName = System.IO.Path.GetFileName(postedFile.FileName);
          if (fileName != "")
          {
            ///注意：可能要修改你的文件夹的匿名写入权限。
            postedFile.SaveAs(System.Web.HttpContext.Current.Request.MapPath("upload_files/") + fileName);
          }
        }
        return true;
      }
      catch(System.Exception Ex)
      {
        return false;
      }
}

</script>

还需要在当前目录创建一个文件夹upload_files，并将该文件夹设置为777(everyone 可读写).

演示地址：http://extjs.org.cn/extjs/examples/form/upload.html

关键字:
- 表单(Forms)

要发表评论，请先登录

调试时 doDecode =

by 游客 - 08/10/2009 - 16:49

调试时
doDecode = function(json){
return eval('(' + json +')');//这句报错
}

错误：Microsoft JScript 编译错误: 缺少 ')'

要发表评论，请先登录

选择路径后

by 游客 - 08/10/2009 - 16:46

选择路径后点击上传
一直停留在上传中。。。
但事实上已经上传好了。

要发表评论，请先登录

这里定义的
{
xtype: 'textfield',
fieldLabel: 'File Name',
name: 'userfile',
inputType: 'file',
allowBlank: false,
blankText: 'File can\'t not empty.',
anchor: '90%' // anchor width by percentage
}
textfield中的值是文件的名称，不是文件的完整路径。
请问如何获得选中文件的完整路径？
我的邮箱258364902@qq.com