Extjs 文件上传

时间：2010-09-16 来源：yqin

Extjs在文件上传中可以使用ext上传组件Ext.ux.UploadDialog 该组件的下载地址http://max-bazhenov.com/dev/upload-dialog-2.0/index.php 但是我在使用该组件的时候，上传一直没有成功，后台一直取不到值。不知道是不是版本问题，我用的是2.1的。

ext上传组件Ext.ux.UploadDialog的使用可以参考 http://blog.csdn.net/zhangyunbo1116/archive/2008/01/28/2070097.aspx

最后放弃了使用ext上传组件Ext.ux.UploadDialog 使用了下面的上传方法。

upload.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.php',
        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,
        ">'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.aspx


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;
      }