• ExtJS+ASP.NET实现单文件上传(FileUpload)


    简单的实现ExtJS+ASP.NET单文件上传(FileUpload),首先在服务器端加一个httpHandler,代码如下:

     1:  
     2: using System;
     3: using System.Web;
     4: using System.IO;
     5: using System.Web.Script.Serialization;
     6:  
     7: namespace MyApplication
     8: {
     9: public class FileUploadHandler : IHttpHandler
     10: {
     11: public void ProcessRequest(HttpContext context)
     12: {
     13: int iTotal = context.Request.Files.Count;
     14:  
     15: if (iTotal == 0) return;
     16:  
     17: HttpPostedFile file = context.Request.Files[0];
     18: int len = file.ContentLength;
     19: 
     20: if (len > 0 && !string.IsNullOrEmpty(file.FileName))
     21: {
     22: string parentPath = HttpContext.Current.Server.MapPath("./upload/");
     23:  
     24: if (!Directory.Exists(parentPath))
     25: {
     26: Directory.CreateDirectory(parentPath);
     27: }
     28:  
     29: string guidPath = Path.Combine(parentPath, System.Guid.NewGuid().ToString());
     30:  
     31: Directory.CreateDirectory(guidPath);
     32:  
     33: //保存文件
     34: file.SaveAs(Path.Combine(guidPath, Path.GetFileName(file.FileName)));
     35: 
     36: FileInfo info = new FileInfo();
     37: info.path = Path.Combine(guidPath, Path.GetFileName(file.FileName));
     38: info.name = Path.GetFileName(file.FileName);
     39: info.tp = Path.GetExtension(file.FileName).ToUpper();
     40: info.size = len.ToString ();
     41: 
     42: //序列化
     43: JavaScriptSerializer j = new JavaScriptSerializer();
     44:  
     45: context.Response.Write(j.Serialize(info));
     46: context.Response.End();
     47: }
     48: }
     49:  
     50: public bool IsReusable
     51: {
     52: get
     53: {
     54: return false;
     55: }
     56: }
     57: }
     58:  
     59: public class FileInfo
     60: {
     61: public string name;
     62: public string path;
     63: public string size;
     64: public string tp;
     65: }
     66: }

    客户端JS:

     1: ShowUploadForm = function(fileTypeHint, displayCallback){
     2: Ext.QuickTips.init();
     3: var fibasic = null;
     4: var fp = new Ext.FormPanel({
     5: region : 'center',
     6: labelWidth : 35,
     7: frame : true,
     8: bodyStyle : 'padding:5px 5px 0',
     9: autoScroll : true,
     10: border : false,
     11: fileUpload : true,
     12: items : [
     13: {
     14: xtype : 'textfield',
     15: fieldLabel : 'File',
     16: name : 'userfile',
     17: id:'txtFile',
     18: inputType : 'file',
     19: width : 160,
     20: allowBlank : true,
     21: blankText : 'File cannot be empty',
     22: height : 25,
     23: anchor : '90%'
     24: },
     25: {
     26: bodyStyle:"padding-left:60px",
     27: html:"<br/><span><font color='#666666'>" + fileTypeHint + "</font></span>"
     28: }],
     29: buttons : [{
     30: text : 'Upload',
     31: type : 'submit',
     32: handler : function() {
     33: if(document.getElementById("txtFile").value == '') return;
     34:  
     35: if (!fp.form.isValid()) {return;}
     36: fp.form.submit({
     37: waitMsg : 'Uploading ....',
     38: url : 'FileUpload.ashx', //此处设置服务端的httpHandler ******, 需要在web.config中也设置**************************
     39: success : function(form, action) {
     40: win.close(this);
     41: },
     42: failure : function(form, action) {
     43: if(displayCallback)
     44: displayCallback(action.result.path, action.result.name, action.result.size, action.result.tp);
     45: win.close(this);
     46: }
     47: });
     48: }
     49: }, {
     50: text : 'Close',
     51: type : 'submit',
     52: handler : function() {
     53: win.close(this);
     54: }
     55: }]
     56: });
     57: 
     58: var win = new Ext.Window({ 
     59: title:'File Upload',
     60: layout:'fit',
     61: 380,
     62: height:295,
     63: plain:true,
     64: items:[fp]
     65: });
     66: 
     67: this.show = function()
     68: { 
     69: win.show(this);
     70: }
     71: 
     72: }
     73:  
     74: //调用这个window示例: 例如,在button_click事件中:
     75: ShowUploadForm frm = new ShowUploadForm('Open *.txt file', openCallback);
     76: frm.show();

    或许您对以下相关文章有兴趣:

  • 相关阅读:
    变量
    词频统计
    Python文件处理
    python面试题
    函数及组合数据类型
    位(bit)、字节(byte)、字符、编码之间的关系
    程序的控制结构
    Python:turtle库的使用及图形绘制
    Dynamics 365 CRM Connected Field Service 不能接收IoT Alert
    Dynamics 365 CRM 部署 Connected Field Service
  • 原文地址:https://www.cnblogs.com/Mainz/p/Extjs_Aspnet_File_Upload.html
Copyright © 2020-2023  润新知