[原创]基于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=' 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=' 65px;'><div style='position: absolute; z-index: -1; height: "+this.Height+"; line-height: "+this.Height+";  65px;text-align: center; cursor: pointer;'>"+this.SelectFileBtnTxt+"</div><div style='height: "+this.Height+";  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+";  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 }
 
 _hy.FileUpLoad.prototype.OnSelectFile = function () 
 {
     //alert(this.Files.length);
     document.getElementById("txt"+this.Id).innerHTML = document.getElementById("InputFile"+this.Id).value;
 }
 
 _hy.FileUpLoad.prototype.OnSubmit =function () 
 {
     for(var item in this.Files)
     {
         if(this.Files[item] != undefined)
         {
             this.from.appendChild(this.Files[item]);
         }
     }
     
     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
 {
     [HandleError]
     public class AQController : PageController
     {
         [AcceptVerbs(HttpVerbs.Post)]
         public string upload()
         {
             HttpFileCollectionBase files = HttpContext.Request.Files;
             for (int iFile = 0; iFile < files.Count; iFile++)
             {
                 HttpPostedFileBase postedFile = files[iFile];
                 string fileName = System.IO.Path.GetFileName(postedFile.FileName);
                 if (fileName != null && fileName != string.Empty)
                 {
                     postedFile.SaveAs(Server.MapPath("~/file/" + DateTime.Now.Ticks.ToString() + fileName));
                 }
             }
 
             Response.Write(string.Format("<script type='text/javascript'>window.parent.ss();</script>"));
             return string.Empty;
         }
 
     }

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();
         }
         function ss() {
             alert("上传成功");
         }
     </script>
 
     <div id="fileup">
     </div>
 
     <script type="text/javascript">
     var fileUpload = new _hy.FileUpLoad("fileUpload",document.getElementById("fileup"),"/AQ/upload",
     "fileUpload_EventName();","fileUpLoad_SelectFile();");
     fileUpload.AddFileHandle = function (sender) 
     {
         alert(sender.Files.length);
     }
     function fileUpload_EventName()
     {
         fileUpload.OnAddFile();
     }
     function fileUpLoad_SelectFile() 
     {
        fileUpload.OnSelectFile();
     }
     function Del_Click() 
     {
       fileUpload.OnRemoveFile("C:\\Program Files\\Adobe\\Reader 8.0\\Reader\\AdobeUpdateCheck.exe");
     }
     function fileup() {
     fileUpload.OnSubmit();
     }
     </script>
 
     <div onclick="Del_Click();">
         册除</div>
         
         <input type="button" onclick="fileup();" value="上传"/>