[原创]基于asp.ent MVC的无刷新文件上传组件

hy.FileUpLoad.js

  1 //Add File = 添加文件

  2  // Select File ＝ 选择文件
  3  // Pleas Select File ＝ 您选择上传文件
  4  // the file is exist ＝ 此文件已经被添加
  5  // your upload file is max 3 ＝ 您一次最多只有上传3个文件
  6  var  _hy  =  _hy  ||  {}; // 命名空间
  7  _hy.FileUpLoad  =   function  (cId,panel,Action,addEventName,selectFileEventName) 
  8  {
  9       this .Id  =  cId;  // 控件标识
 10       this .Files  =   new  Array();　 // 文件对象列表
 11       this .Panel  =  panel;   // 父控件容器
 12       this .TempInput  =  undefined;  // Input File 标签
 13       this .Action  =  Action;　 // 提交页面
 14       this .AddFileHandle  =  undefined;  // 添加文件事件
 15       this .AddFileEventName  =  addEventName;
 16       this .CssAddFileBtn  =   "" ;　 // 添加文件按钮CSS
 17       this .AddFileBtnTxt  =   " Add File " ;
 18       this .CssLabel  =   "" ;  // 显示文件路径标签CSS
 19       this .CssSelectFileBtn  =   "" ;  // 选择文件CSS width=65px;
 20       this .SelectFileBtnTxt  =   " Select File " ;
 21       this .SelectFileEventName  =  selectFileEventName;
 22       this .Height  =   " 25px " ; // 控件高度
 23       this .from  =  undefined;
 24       this .inputFilePanel  =  undefined;
 25       this .max  =   3 ;
 26       this .OnInit();
 27  }
 28  _hy.FileUpLoad.prototype.OnInit = function ()
 29  { 
 30       if ( this .Panel  ==  undefined)
 31      {
 32           throw   new  Error( 0 , " The Panel is undefined " );
 33           return ;
 34      }
 35 
 36       this .Panel.innerHTML  =   " <table border='0' cellspacing='0' cellpadding='0' width='100%' id=' " + this .Id + " '><tr><td style='width: 65px;'><div style='height:  " + this .Height + " ; line-height:  " + this .Height + " ; text-align: center;' class=' " + this .CssAddFileBtn + " ' id='AddFileBtnObj " + this .Id + " ' onclick=' " + this .AddFileEventName + " '> " + this .AddFileBtnTxt + " </div></td><td style='width: 65px;'><div style='position: absolute; z-index: -1; height:  " + this .Height + " ; line-height:  " + this .Height + " ; width: 65px;text-align: center; cursor: pointer;'> " + this .SelectFileBtnTxt + " </div><div style='height:  " + this .Height + " ; width: 65px; line-height:  " + this .Height + " ; cursor: pointer;' id='InputFilePanel " + this .Id + " '> " + this .GetInputFileStr() + " </div></td><td style='text-align: left;'><div style='height:  " + this .Height + " ; line-height:  " + this .Height + " ;' id='txt " + this .Id + " '>&nbsp;</div><div style='display: none; position: absolute; top: 0; left: 0;'><iframe name='iframe " + this .Id + " '></iframe><form action=' " + this .Action + " ' enctype='multipart/form-data' id='form " + this .Id + " ' method='post' target='iframe " + this .Id + " '></form></div></td></tr></table> " ;
 37       this .from  =  document.getElementById( " form " + this .Id);
 38       this .inputFilePanel  =  document.getElementById( " InputFilePanel " + this .Id);
 39  } 
 40 
 41  _hy.FileUpLoad.prototype.GetInputFileStr = function  ()
 42   {
 43 
 44       return   " <input type='file' id='InputFile " + this .Id + " ' name='InputFile " + this .Id + " ' style='line-height: 25px;height:  " + this .Height + " ; width: 68px; filter: Alpha(opacity=0); -moz-opacity: 0.0; opacity: 0.0;z-index: 1; cursor: pointer;' onchange=' " + this .SelectFileEventName + " '/> " ;
 45 
 46   }
 47 
 48  _hy.FileUpLoad.prototype.OnAddFile  =   function  () 
 49  {
 50          var  inputf  =  document.getElementById( " InputFile " + this .Id);
 51          if (inputf.value ==   "" )
 52         {
 53              alert( " Pleas Select File " );
 54               return  ;
 55         }
 56        
 57          if ( this .IsExist(inputf))
 58         {
 59              alert( " the file is exist " );
 60               return ;
 61         }
 62          if ( this .Files.length  >= 3 )
 63         {
 64              alert( " your upload file is max 3 " );
 65               return ;
 66         }
 67          // this.from.appendChild(inputf);
 68          this .Files.push(inputf);
 69          this .inputFilePanel.innerHTML  =   this .GetInputFileStr();
 70         document.getElementById( " txt " + this .Id).innerHTML  =   " &nbsp; " ;
 71          if ( this .AddFileHandle  !=  undefined)
 72         {
 73               this .AddFileHandle( this );
 74         }
 75  }
 76 
 77  _hy.FileUpLoad.prototype.IsExist  =   function  (inputf) 
 78  {
 79       for ( var  item  in   this .Files)
 80      {
 81           if ( this .Files[item].value  ==  inputf.value)
 82          {
 83               return   true ;
 84          }
 85      }
 86       return   false ;
 87  }
 88 
 89  _hy.FileUpLoad.prototype.OnRemoveFile  =   function  (value) 
 90  {
 91           // this.from.removeChild(this.Files.pop());
 92           for ( var  item  in   this .Files)
 93          {
 94               if ( this .Files[item].value  ==  value)
 95              {
 96                   this .Files[item]  =  undefined;
 97              }
 98          }
 99  }
100 
101  _hy.FileUpLoad.prototype.OnSelectFile  =   function  () 
102  {
103       // alert(this.Files.length);
104      document.getElementById( " txt " + this .Id).innerHTML  =  document.getElementById( " InputFile " + this .Id).value;
105  }
106 
107  _hy.FileUpLoad.prototype.OnSubmit  = function  () 
108  {
109       for ( var  item  in   this .Files)
110      {
111           if ( this .Files[item]  !=  undefined)
112          {
113               this .from.appendChild( this .Files[item]);
114          }
115      }
116      
117       this .from.submit();

118 } 

 FileUpLoad.cs

1 using System;

 2  using  System.Collections.Generic;
 3  using  System.Linq;
 4  using  System.Web;
 5  using  System.Web.Mvc;
 6  using  System.Web.Mvc.Ajax;
 7  using  Medusa.Mow.BusinessRule;
 8  using  Medusa.Mow.DataModel;
 9  namespace  MedusaOfficialWeb.Controllers
10  {
11      [HandleError]
12       public   class  AQController : PageController
13      {
14          [AcceptVerbs(HttpVerbs.Post)]
15           public   string  upload()
16          {
17              HttpFileCollectionBase files  =  HttpContext.Request.Files;
18               for  ( int  iFile  =   0 ; iFile  <  files.Count; iFile ++ )
19              {
20                  HttpPostedFileBase postedFile  =  files[iFile];
21                   string  fileName  =  System.IO.Path.GetFileName(postedFile.FileName);
22                   if  (fileName  !=   null   &&  fileName  !=   string .Empty)
23                  {
24                      postedFile.SaveAs(Server.MapPath( " ~/file/ "   +  DateTime.Now.Ticks.ToString()  +  fileName));
25                  }
26              }
27 
28              Response.Write( string .Format( " <script type='text/javascript'>window.parent.ss();</script> " ));
29               return   string .Empty;
30          }
31 
32      }

33 }

 前台使用

1  <script type="text/javascript" src="http://www.cnblogs.com/Scripts/hy.FileUpLoad3.js">

 2       </ script >
 3      
 4       < script  type ="text/javascript" >
 5           function  upload_Click() {
 6               var  imgObj  =  document.getElementById( " File1 " );
 7               var  from1  =  document.getElementById( " load " );
 8              from1.appendChild(imgObj);
 9              from1.submit();
10          }
11           function  ss() {
12              alert( " 上传成功 " );
13          }
14       </ script >
15 
16       < div  id ="fileup" >
17       </ div >
18 
19       < script  type ="text/javascript" >
20       var  fileUpload  =   new  _hy.FileUpLoad( " fileUpload " ,document.getElementById( " fileup " ), " /AQ/upload " ,
21       " fileUpload_EventName(); " , " fileUpLoad_SelectFile(); " );
22      fileUpload.AddFileHandle  =   function  (sender) 
23      {
24          alert(sender.Files.length);
25      }
26       function  fileUpload_EventName()
27      {
28          fileUpload.OnAddFile();
29      }
30       function  fileUpLoad_SelectFile() 
31      {
32         fileUpload.OnSelectFile();
33      }
34       function  Del_Click() 
35      {
36        fileUpload.OnRemoveFile( " C:\\Program Files\\Adobe\\Reader 8.0\\Reader\\AdobeUpdateCheck.exe " );
37      }
38       function  fileup() {
39      fileUpload.OnSubmit();
40      }
41       </ script >
42 
43       < div  onclick ="Del_Click();" >
44          册除 </ div >
45          
46           < input  type ="button"  onclick ="fileup();"  value ="上传" />