附件上传 js（未完成）
Posted tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了附件上传 js（未完成）相关的知识，希望对你有一定的参考价值。
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 += ‘ <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 += ‘ <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"> 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"> 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"> <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（未完成）的主要内容，如果未能解决你的问题，请参考以下文章
Servicenow：表格中的自定义附件小部件未在提交时上传文档
jquery-from.js上传附件，回调返回的结果是前端页面或者是下载文件！！！
使用来自 node.js 的 AWS SES 在邮件中上传 .jpg 图像附件