[原创]基于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+"'> </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 = " ";

 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="上传"/>