访163网盘文件上传效果

最新推荐文章于 2024-04-24 09:22:16 发布

jamix

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量1.9k

点赞数

分类专栏： JavaScript 文章标签： function file input border javascript xhtml

本文链接：https://blog.csdn.net/jamix/article/details/5382347

版权

JavaScript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

给自己的JS学习做个标记哈,^_^!!!

兼容FF3+,IE6,IE7,Chrome等

先上图~~~

遇到的问题:

1.怎样在点击图片时,打开文件选择窗口?

解决方法:刚开始在网上搜索,看到的解决方法是用一个隐藏的file文件,点击"添加文件"时触发file文件的click事件,这个IE是可以用的,不过有FF下无效!只好硬着头皮去看163的源码,它的解决方法是用一个全透明的FILE放在"添加文件"之上(统一大小)在点击时实际上点击的是FILE,OK!就这样解决了~~

2.选择文件后如何取得文件的地址或文件的相关数据?

(其实我也不知道取得文件地址后在赋值到另一个FILE上是否会有效,只是这是要走的一步在我看来)

解决方法:在透明的FILE文件值改变时取得它的数据,并将它赋值到一个新建的FILE(做隐藏)上,问题来了,我用onpropertychange,这个IE下可以取得文件地址,FF下是oninput,网上说检测元素属性发生变化时触发的~~~可是在FF下根本就得不到文件的完整路径!!!行不通...这个想了好久,于是就猛GOOGLE啊.未果!!!(没多久就下班了)一路上想着~~~突然想到:如果在文件选择后就隐藏当前透明FILE,在创建一个透明FILE!(哇,思路开阔了许多啊)

问题基本上就搞定了..呵呵~~~

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>上传文件</title> </head> <mce:script type="text/javascript" src="filebar.js" mce_src="filebar.js"></mce:script> <body> <form name="upform" action="" enctype="multipart/form-data" method="post" οnsubmit="return confirm('你真的准备上传吗')"> <div id="file_bar"></div> <br /> <input type="submit" value="上传" /> </form> <span id="file_up"></span> </body> </html> <mce:script type="text/javascript"></mce:script>

JS文件

// JavaScript Document /* *========== *author jamix *lingtong21@163.com *文件上传控制 *参数(渲染区，文件类型,文件命名前缀) *默认(第一个表单,图片文件,uFile) *========== */ function fileBar(r, f, h){ this.type = ['jpg,jpeg,gif,png', '7z,aiff,asf,avi,bmp,csv,doc,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,zip']; this.render = r ? (document.getElementById(r)) : (document.forms[0] ? document.forms[0] : null); if(!this.render) return null; this.filter = (!f || f == 'images') ? 0 : 1; this.fHead = h ? h : 'uFile'; this.fCount = 0; this.selFile = null; this.fTab = null; } fileBar.prototype.init = function(){ this.render.style.position = 'relative'; //上传按钮 var selBtn = document.createElement('div'); with(selBtn.style){ paddingTop = '8px'; width = '75px'; height = '22px'; textAlign = 'center'; color = '#FFF'; fontSize = '12px'; background = 'url(images/upfile_btn_bg.gif) repeat-x'; } selBtn.innerHTML = '添加文件'; this.render.appendChild(selBtn); this.setSel(); } //文件选择器 fileBar.prototype.setSel = function(){ var me = this; this.selFile = document.createElement('input'); this.selFile.setAttribute('type','file'); this.selFile.setAttribute('size','0'); this.selFile.setAttribute('name','sel_input'); this.selFile.setAttribute('id','sel_input'); with(this.selFile.style){ position = 'absolute'; width = '60px'; height = '30px'; top = '0'; left = '0'; border = '0'; opacity = '0'; curseo = 'pointer'; filter = 'alpha(opacity = 0)'; } this.selFile.onchange = function(){ if(me.fileCheck()){ me.getSelFile(); } } this.render.appendChild(this.selFile); } //文件检查 fileBar.prototype.fileCheck = function(){ var flag = false; var fVal = this.selFile.value; var fSuffix = fVal.split('.')[1].toLowerCase(); if(!fSuffix){ alert('请选择合法的文件上传'); return false; } var filterArr = this.type[this.filter].split(','); var filterLen = filterArr.length; for(i = 0; i < filterLen; i++){ if(fSuffix == filterArr[i]){ flag = true; break; } } if(!flag) alert('请上传'+ this.type[this.filter] +'文件'); return flag; } //取得上传文件 fileBar.prototype.getSelFile = function(){ var eleSel = this.selFile; eleSel.setAttribute('name',this.fHead + this.fCount); eleSel.setAttribute('id',this.fHead + this.fCount); eleSel.style.display = 'none'; if(!this.fTab) this.createTab(); this.fCount++; this.showUpFile(); this.setSel(); } //创建表格 fileBar.prototype.createTab = function(){ this.fTab = document.createElement('table'); this.fTab.setAttribute('width','50%'); this.fTab.setAttribute('border','0'); this.fTab.setAttribute('cellspacing','5'); this.fTab.setAttribute('cellpadding','0'); with(this.fTab.style){ borderCollapse = 'collapse'; margin = '5px 0'; fontSize = '12px'; fontFamily = 'Arial, Helvetica, sans-serif'; } var _tr = this.fTab.insertRow(-1); _tr.style.backgroundColor = '#F4F4F4'; var tdText = Array('文件名','操作'); var _td; for(i = 0; i < 2; i++){ _td = _tr.insertCell(-1); _td.setAttribute('width','50%'); with(_td.style){ width = '50%'; textAlign = 'center'; color = '#555555'; border = '1px solid #dddddd'; padding = '5px'; } _td.innerHTML = tdText[i]; } this.render.appendChild(this.fTab); } //创建单元格 fileBar.prototype.createTd = function(_row, txt){ var _td,_align; var me = this; for(i = 0; i < 2; i++){ _td = _row.insertCell(-1); _td.setAttribute('width','50%'); _align = i ? 'center' : 'left'; with(_td.style){ width = '50%'; textAlign = _align; color = '#555555'; border = '1px solid #dddddd'; padding = '5px'; } if(i == 0){ _td.innerHTML = txt[i]; }else{ _a = document.createElement('a'); _a.setAttribute('href','javascript:void(0)'); _a.style.color = '#181'; _a.innerHTML = txt[i]; _a.onclick = function(){ me.delUpFile(this); }; _td.appendChild(_a); } } } //显示要上传的文件 fileBar.prototype.showUpFile = function(){ if(!this.fTab) return; var _tr = this.fTab.insertRow(-1); var fVal = this.selFile.value; fVal = fVal.replace(g,'/'); var fArr = fVal.split('/'); var fName = fArr[fArr.length-1]; this.createTd(_tr,Array(fName,'删除')); } //删除上传文件 fileBar.prototype.delUpFile = function(obj){ var _tr = obj.parentNode.parentNode; var _tab = _tr.parentNode; var getTr = _tab.getElementsByTagName('tr'); var _rIndex = _tr.rowIndex; var getFile = this.render.getElementsByTagName('input'); this.render.removeChild(getFile[_rIndex-1]); var _getNewFile = this.render.getElementsByTagName('input'); var _nFileLen = _getNewFile.length - 1; this.fCount = _nFileLen; for(i = 0; i < _nFileLen; i++){ _getNewFile[i].setAttribute('name',this.fHead + i); _getNewFile[i].setAttribute('id',this.fHead + i); } _tab.removeChild(getTr[_rIndex]); //alert(_tr.rowIndex); }

要用到的一个图片

jamix

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
访163网盘文件上传效果

给自己的JS学习做个标记哈,^_^!!! 兼容FF3+,IE6,IE7,Chrome等先上图~~~ 遇到的问题: 1.怎样在点击图片时,打开文件选择窗口? 解决方法:刚开始在网上搜索,看到的解决方法是用一个隐藏的file文件,点击"添加文件"时触发file文件的click事件,这个IE是可以用的,不过有FF下无效!只好硬着头皮去看163的源码,
复制链接

扫一扫