您现在的位置: 365建站网 > 365文章 > [原创]基于asp.ent MVC的无刷新文件上传组件

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

文章来源:365jz.com     点击数:532    更新时间:2009-09-12 15:00   参与评论

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

 

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (532人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号