附件上传 使用javascript

 

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head id="Head1" runat="server">
 3     <title></title>
 4     <script type="text/javascript">
 5         function ShowImg(obj) {
 6             var a = obj.toString();
 7             var isNumber = /^[1-30]$/;
 8             var img = "0";
 9             if (isNumber.test(a)) {
10                 img = a;
11                 a = "div_" + a;
12             }
13             var docObj = document.getElementById(a);
14             var img1 = document.getElementById("img_"+img);
15             if (docObj.files && docObj.files[0]) {
16                 //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
17                 img1.src = window.URL.createObjectURL(docObj.files[0]);
18                 document.getElementById("sname").value += img1.src+" ";
19             }
20             return true;
21         }
22         //设置ID变量参数
23         var fileId = 1;
24         var fileId_ = 1;
25         //添加附件 生成一个DIV 里面包含file控件和图片
26         function addFile() {
27             //获取div(包含file控件和图片)
28             var FilesDiv = document.getElementById('FilesDiv');
29             //设置一个DIV的id为“div1”
30             var divId = "div" + fileId;
31             //拼接一个div 让其ID自增长 可一直添加
32             var str = '<div id="' + divId + '">';
33             str += '<img id="img_' + fileId + '"  src="" style=" width:100px; height:100px" /><br />'
34             str += '<input type="file" size="40" id="div_' + fileId + '" onchange="ShowImg(\'' + fileId + '\')"  name="File" style="border: solid 1px #0077B2">'
35             str += '&nbsp;<img src="../images/icon_stop.gif" onclick="delFile(\'' + divId + '\')"/>';
36             str += "<div>";
37             FilesDiv.insertAdjacentHTML("beforeEnd", str)
38             fileId++;
39         }
40         function delFile(obj) {
41             var FilesDiv = document.getElementById('FilesDiv');
42             var elem = document.getElementById(obj);
43             FilesDiv.removeChild(elem);
44         }
45         function Sub() {
46             var len = document.getElementById('FilesDiv').getElementsByTagName('input');
47             if (len.length != 0) {
48                 for (var i = 0; i < len.length; i++) {
49                     if (len[i].type == "file") {
50                         if (len[i].value == "") {
51                             alert('请选择要上传的附件!');
52                             return false;
53                         }
54                         else {
55 
56                         }
57                     }
58                 }
59             }
60             else {
61                 alert('请选择要上传的附件!');
62                 return false;
63             }
64         }
65     </script>
66 </head>
67 <body>
68     <form id="form1" runat="server">
69     <div>
70         <div id="FilesDiv">
71            <div id="div0">
72            <img id="img_0" src="" style=" width:100px; height:100px" /><br />
73             <input type="file" runat="server" size="40" name="File" id="file0" onchange="ShowImg('file0')" style="border: solid 1px #0077B2" />&nbsp;
74             <img src="../images/icon_stop.gif"  onclick="delFile('div0')" />
75            </div>
76         </div>
77           <input type="button" value="添加附件" onclick="addFile();return false" id="btnInput" runat="server" />
78             <asp:Button ID="btnUpload" runat="server" Text="上传附件" OnClick="btnUpload_Click"  OnClientClick="return Sub();"/><P>
79               </P> 
80              <input type="hidden" name="sname" id="sname" /> 
81     </div>
82     </form>   
83 </body>
84 </html>

 

后台

 1  protected void Page_Load(object sender, EventArgs e)
 2         {
 3             if (!IsPostBack)
 4             {
 5                 
 6             }
 7         }
 8           /// 检测指定的文件夹是否存在,不存在就创建
 9           /// </summary>
10           /// <param name="imgpath">该文件夹的之前的路径,注意一定要带上"/"</param>
11           /// <returns></returns>
12           public static string CheckFile()
13           {
14               //命名一个今天的文件夹
15               string folder = DateTime.Now.ToString("yyyyMMdd");
16  
17              //判断文件是否存在
18              if (!System.IO.Directory.Exists(folder))
19              {
20                  //自动生成文件夹
21                  System.IO.Directory.CreateDirectory(folder);
22 
23                  //生成后返回文件夹名
24                  return  folder;
25              }
26  
27             //如果存在,直接返回今天的文件夹名
28              return  folder;
29          }
30 
31           protected void btnUpload_Click(object sender, EventArgs e)
32          {
33              if (Request.Form["sname"] != null)
34              {
35                  //获取到附件存放的URL
36                  string UrlName = Request.Form["sname"];
37                 string[] strArr = UrlName.Split(' ');
38              }
39              //声明名称、大小、类型等几个变量
40              string f_name, f_size, f_tye;
41              HttpFileCollection hfc = Request.Files;
42              for (int i = 0; i < hfc.Count; i++)
43              {
44                  HttpPostedFile hpf = hfc[i];
45                  f_name = hpf.FileName;
46                  f_size = hpf.ContentLength.ToString();
47                  f_tye = hpf.ContentType;
48                  
49              }
50              
51          }

今天写到这。。。。。

posted @ 2016-05-24 08:58  天启♘  阅读(352)  评论(0编辑  收藏  举报