[原创]基于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 }
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="上传"/>
