码迷,mamicode.com
首页 > Web开发 > 详细

附件上传 js(未完成)

时间:2016-05-24 09:15:53      阅读:258      评论:0      收藏:0      [点我收藏+]

标签:

  1 <html xmlns="http://www.w3.org/1999/xhtml">
  2 <head runat="server">
  3     <title></title>
  4 
  5     <script type="text/javascript">
  6         function ShowImg(obj) {
  7             alert(obj.toString());
  8             var docObj = document.getElementById("file0");
  9             var img1 = document.getElementById("img1");
 10             if(docObj.files && docObj.files[0]) {
 11                 //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
 12                 img1.src = window.URL.createObjectURL(docObj.files[0]);
 13             } 
 14             return true;
 15         }
 16         //设置ID变量参数
 17         var fileId = 1;
 18         var fileId_ = 1;
 19         //添加附件 生成一个DIV 里面包含file控件和图片
 20         function addFile() {
 21             //获取div(包含file控件和图片)
 22             var FilesDiv = document.getElementById(FilesDiv);
 23             //设置一个DIV的id为“div1”
 24             var divId = "div" + fileId;
 25             //拼接一个div 让其ID自增长 可一直添加
 26             var str = <div id=" + divId + ">;
 27             str += <img id="img + divId + "  src="" style=" width:100px; height:100px" /><br />
 28             str += <input type="file" size="40" onchange=""  name="File" style="border: solid 1px #0077B2">
 29             str += &nbsp;<img src="../images/icon_stop.gif" onclick="delFile(\‘ + divId + \‘)"/>;
 30             str += "<div>";
 31             alert(str);
 32             FilesDiv.insertAdjacentHTML("beforeEnd", str)
 33             fileId++;
 34         }
 35         
 36 
 37         function delFile(obj) {
 38             var FilesDiv = document.getElementById(FilesDiv);
 39             var elem = document.getElementById(obj);
 40             FilesDiv.removeChild(elem);
 41         }
 42 
 43         function Sub() {
 44             var len = document.getElementById(FilesDiv).getElementsByTagName(input);
 45             if (len.length != 0) {
 46                 for (var i = 0; i < len.length; i++) {
 47                     if (len[i].type == "file") {
 48                         if (len[i].value == "") {
 49                             alert(请选择要上传的附件!);
 50                             return false;
 51                         }
 52                         else { 
 53                             
 54                         }
 55                     }
 56                 }
 57             }
 58             else {
 59                 alert(请选择要上传的附件!);
 60                 return false;
 61             }
 62         }
 63 
 64 
 65 
 66 
 67         //点击浏览参数事件 生成一个DIV 里面包含file控件和图片
 68         function addFile_() {
 69             //获取div(包含file控件和图片)
 70             var FilesDiv1 = document.getElementById(FilesDiv1);
 71             //设置一个DIV的id为“div1”
 72             var divId = "div" + fileId_;
 73             //拼接一个div 让其ID自增长 可一直添加
 74             var str = <div id=" + divId + ">;
 75             str += <input type="file" size="40" name="File" onchange="ShowImg( + divId + )" style="border: solid 1px #0077B2">
 76             str += &nbsp;<img src="../images/icon_stop.gif" onclick="delFile_(\‘ + divId + \‘)"/>;
 77             str += "<div>";
 78             FilesDiv1.insertAdjacentHTML("beforeEnd", str)
 79             fileId_++;
 80         }
 81 
 82         function delFile_(obj) {
 83             var FilesDiv1 = document.getElementById(FilesDiv1);
 84             var elem = document.getElementById(obj);
 85             FilesDiv1.removeChild(elem);
 86         }
 87 
 88         function Sub_() {
 89             var len = document.getElementById(FilesDiv1).getElementsByTagName(input);
 90             if (len.length != 0) {
 91                 for (var i = 0; i < len.length; i++) {
 92                     if (len[i].type == "file") {
 93                         if (len[i].value == "") {
 94                             alert(请选择要上传的附件!);
 95                             return false;
 96                         }
 97                         else {
 98 
 99                         }
100                     }
101                 }
102             }
103             else {
104                 alert(请选择要上传的附件!);
105                 return false;
106             }
107         }
108     </script>
109 </head>
110 <body>
111     <form id="form1" runat="server">
112     <div>
113         <div id="FilesDiv">
114            <div id="div0">
115            <img id="img1" src="" style=" width:100px; height:100px" /><br />
116             <input type="file" runat="server" size="40" name="File" id="file0" onchange="ShowImg(‘abc‘)" style="border: solid 1px #0077B2">&nbsp;
117             <img src="../images/icon_stop.gif" onclick="delFile(‘div0‘)" />
118            </div>
119         </div>
120           <input type="button" value="添加附件" onclick="addFile();return false" id="btnInput" runat="server" />
121             <asp:Button ID="btnUpload" runat="server" Text="上传附件" OnClick="btnUpload_Click"  OnClientClick="return Sub();"/><P>
122                </P> 
123 
124                <div id="FilesDiv1">
125            <div id="div_0">
126             <input type="file" runat="server" size="40" name="File" id="file1" style="border: solid 1px #0077B2">&nbsp;
127             <img src="../images/icon_stop.gif" onclick="delFile_(‘div0‘)" />
128            </div>
129         </div>
130           <input type="button" value="添加附件" onclick="addFile_();return false" id="Button1" runat="server" />
131             <asp:Button ID="Button2" runat="server" Text="上传附件" OnClick="btnUpload_Click"  OnClientClick="return Sub_();"/><P>
132                </P> 
133     </div>
134     <hr />
135     <input type="file" id="f1" onchange="onch(‘111‘)"/>
136     <input type="file" id="f2" onchange="onch(‘222‘)" />
137     
138     </form>
139      <script type="text/javascript">
140          function onch(obj) {
141              alert(obj.toString());
142          }
143      </script>
144 
145      <hr />
146      <div id="div3"><img id="imgdiv3"  src="" style=" width:100px; height:100px" /><br /><input type="file" size="40" onchange="ShowImg(‘div3‘)"  name="File" style="border: solid 1px #0077B2">&nbsp;<img src="../images/icon_stop.gif" onclick="delFile(‘div3‘)"/><div>
147 </body>
148 </html>
1  protected void btnUpload_Click(object sender, EventArgs e)
2         {
3             HttpFileCollection hfc = Request.Files;
4             int i = hfc.Count;
5         }

生成的Onchange事件有问题,进不到事件里面去

附件上传 js(未完成)

标签:

原文地址:http://www.cnblogs.com/xiaoma-qi/p/5522228.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!