JS仿网易多附件上传功能
html<div nowrap id="filespan"> <input type="button"value="添加附件" id="btnAdd" /> <div id="divMsg">尚未添加文件</div></div>
js
var isIE = (navigator.userAgent.indexOf("MSIE") != -1);var fileIndex = 0;var dic = new ActiveXObject("Scripting.Dictionary");function addFile() { var obj; if (isIE) { obj = document.createElement("<input type=file id='hdnFile' onchange='getValue(this.value);' style='display:none' />"); } else { obj = document.createElement("input"); obj.type = "file"; obj.id="hdnFile"; obj.setAttribute("style", "display:none;", 0); obj.setAttribute("onchange", "javascript:getValue(this.value);", 0); } document.getElementById("filespan").appendChild(obj); document.getElementById('hdnFile').click(); //addInputFile(spanId, fileId); document.getElementById('divMsg').style.display = (dic.Count > 0)?'none':''; }function addInputFile(spanId, fileId, str) { var span = document.getElementById(spanId); if (span != null) { //检测存在性 //if (dic.Exists(fileId)) if(valueExists(str)) { alert("不能重复添加相同文件"); return false; } var divObj = document.createElement("div"), fileObj, delObj; divObj.id = fileId; divObj.style.height='22'; var imgObj, fileObj, delObj; if (isIE) { imgObj = document.createElement("<img src='unknown.gif' />"); fileObj = document.createElement("<input type=text readonly>"); delObj = document.createElement("<img src='delfile.jpg' onclick=delInputFile('" + spanId + "','" + fileId + "')>"); } else { imgObj = document.createElement("img"); imgObj.setAttribute("src", "unknown.gif", 0); fileObj = document.createElement("input"); fileObj.type = "text"; fileObj.setAttribute("readonly", "readonly", 0); //fileObj.setAttribute("onchange", "javascript:alert('');", 0); delObj = document.createElement("img"); imgObj.setAttribute("src", "delfile.jpg", 0); //delObj.type = "button"; delObj.setAttribute("onclick", "delInputFile('" + spanId + "','" + fileId + "')", 0); } fileObj.name = fileId; fileObj.size = "50"; fileObj.value = str; fileObj.className = "NoborderR"; //delObj.value = "删除"; divObj.appendChild(imgObj); divObj.appendChild(document.createTextNode(" ")); divObj.appendChild(fileObj); divObj.appendChild(document.createTextNode(" ")); divObj.appendChild(delObj); span.appendChild(divObj); //数据字典记录 dic.Add(fileId, str); }}function delInputFile(spanId, fileId) { var span = document.getElementById(spanId); var divObj = document.getElementById(fileId); if (span != null && divObj != null) { span.removeChild(divObj); //从数据字典移除 dic.Remove(fileId); document.getElementById('divMsg').style.display = (dic.Count > 0)?'none':''; }}function getValue(str){ var spanId = "filespan"; var fileId = "uploadfile" + (fileIndex++); addInputFile(spanId, fileId, str); document.getElementById(spanId).removeChild(document.getElementById('hdnFile'));}function valueExists(str){ a = (new VBArray(dic.Items())).toArray(); //获取条目。 for (i in a) //遍历该 dictionary。 { if(a==str) return true; } return false;}//-->
页:
[1]