访163网盘文件上传效果
2010-03-15 16:41
351 查看
给自己的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代码
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" onsubmit="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"><!--
var f_bar = new fileBar('file_bar');
f_bar.init();
// --></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);
}要用到的一个图片
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 仿163网盘无刷新多文件上传系统
- 仿163网盘无刷新多文件上传系统<转>
- 仿163网盘无刷新文件上传系统
- 仿163网盘无刷新文件批量上传系统
- 仿163网盘无刷新文件上传系统
- 仿163网盘无刷新多文件上传系统
- 仿163网盘无刷新多文件上传系统转一下很不错啊
- javascript仿163网盘无刷新文件上传系统
- 仿163网盘无刷新多文件上传系统
- 仿163网盘无刷新文件上传系统
- 仿163网盘无刷新文件上传系统
- javascript仿163网盘无刷新文件上传系统
- fileUpload文件上传带进度条效果
- 大文件上传 进度条显示（仿CSDN资源上传效果）
- div滚动条弹出层效果 （所需要的css文件和js文件，都已经上传到文件里面了progressbar.rar）
- iframe实现Ajax文件上传效果示例
- AJAX-----09iframe模拟ajax文件上传效果原理1
- 弹出框效果+多文件上传
- 大文件上传 进度条显示（仿CSDN资源上传效果）
- 大文件上传 进度条显示 （仿csdn资源上传效果）