想做一個管理后面，想用到gmail添加附件的功能到添加產品圖，找了很多源碼都不合適，找到了一段，但在FF下有問題。
++++++++++++++++
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
/**//************************
* author lijun
* date 2007.5.25
*
* 無刷新上傳
* IE,Firefox下和Gmail類似的附件添加方式
* 允許進一步擴展，實現附件添加后即自動上傳得功能。
* 2007.5.30修正了一個bug.
************************/
/**//* 檢測瀏覽器類型 */
function isIE()
{
if(document.attachEvent)
{
return true;
}
else
{
return false;
}
}
/**//*firefox下的附件添加提示*/
function getFirefoxTip(form)
{
var str="添加一個附件";
var cssStr="width:100px;font:12px Arial;color:#00f;text-decoration:underline";
var tipDiv=document.createElement("div");
tipDiv.style.cssText=cssStr;
tipDiv.innerHTML=str;
tipDiv.onclick=function()
{
var i=form.getAttribute("count")?form.getAttribute("count"):0;
createFirefoxInput(form,parseInt(i)+1);
};
return tipDiv;
}
/**//*刪除已經添加的附件項*/
function removeChild(parent,child,tip)
{
var i=parent.getAttribute("count");
if(isIE())
{
var id=parseInt(child.getAttribute("id"));
parent.removeChild(child);
parent.removeChild(tip);
i--;
/**//*
var tipAry=new Array();
var inputAry=new Array();
for(j=0;j <parent.childNodes.length;j++)
{
var node=parent.childNodes[j];
if(node.nodeType==1)
{
if(node.getAttribute("idi"))
{
inputAry.push(node);
}
else if(node.getAttribute("idt"))
{
tipAry.push(node);
}
}
}
for(j=0;j <tipAry.length;j++)
{
var position=getPosition(tipAry[j]);
inputAry[j].style.top=position.top+"px";
inputAry[j].style.left=position.left+"px";
}
*/
var tipAry=rePlaceInput(parent);
if(i==0)
{
tipAry[i].innerHTML="添加一個附件";
}
}
else
{
parent.removeChild(child);
i--;
if(i==0)
{
tip.innerHTML="添加一個附件";
}
}
parent.setAttribute("count",i);
}
/**//* 添加移除項 */
function getRemove(form,node,tip)
{
var text="移除";
var span=document.createElement("span");
span.style.cssText="font:10px Arial;color:#00f;text-decoration:underline;";
span.innerHTML=text;
span.onclick=function(){removeChild(form,node,tip);}
return span;
}
/**//* firefox下的文件選擇框 */
function createFirefoxInput(form,inputIndex)
{
var i=inputIndex?inputIndex:0;
var tip=i==0?getFirefoxTip(form):form.lastChild;
if(i==0)
{
form.appendChild(tip);
}
else
{
var inputDiv=document.createElement("div");
var input=document.createElement("input");
input.setAttribute("type","file");
input.setAttribute("name","file_"+i);
input.onchange=function(){
}
inputDiv.appendChild(input);
inputDiv.appendChild(getRemove(form,inputDiv,tip));
form.insertBefore(inputDiv,tip);
form.setAttribute("count",i);
tip.innerHTML="再添加一個附件";
}
}
/**//* firefox下的初始化函數 */
function initFirefox()
{
var form=document.forms['uploadForm'];
createFirefoxInput(form);
}
/**//* 獲取指定元素在頁面的位置 */
function getPosition(obj)
{
var top=0,left=0;
while(obj.offsetParent)
{
top+=obj.offsetTop;
left+=obj.offsetLeft;
obj=obj.offsetParent;
}
return {top:top,left:left};
}
/**//* IE下的附件添加提示 */
function getIeTip(form)
{
var str=parseInt(form.getAttribute("count"))>=0?"再添加一個附件":"添加一個附件";
var cssStr="font:12px Arial;color:#00f;text-decoration:underline";
var tipDiv=document.createElement("div");
tipDiv.style.cssText=cssStr;
tipDiv.innerHTML=str;
return tipDiv;
}
/**//*IE下的文件按選擇顯示*/
function updateIeInput(input,tip)
{
var parent=input.parentNode;
parent.style.zIndex=-2;
tip.style.textDecoration="none";
tip.style.color="#000000";
tip.style.fontWeight="bold";
tip.innerHTML=input.value;
tip.appendChild(getRemove(input.form,parent,tip));
}
/**//*創建IE下的文件選擇框*/
function createIeInput(form,inputIndex)
{
var i=inputIndex?inputIndex:0;
var tip=getIeTip(form);
tip.setAttribute("idt",i)
form.appendChild(tip);
var inputDiv=document.createElement("div");
var input=document.createElement("input");
input.setAttribute("type","file");
input.setAttribute("name","file_"+i);
input.style.cssText="width:0";
input.onchange=function(){
createIeInput(this.form,parseInt(this.form.getAttribute("count"))+1);
updateIeInput(this,tip);
rePlaceInput(this.form);
}
inputDiv.appendChild(input);
inputDiv.setAttribute("idi",i);
var position=getPosition(tip);
inputDiv.style.cssText="position:absolute;top:"+position.top+"px;left:"+position.left+"px;filter:alpha(opacity=0);z-index:2";
form.appendChild(inputDiv);
form.setAttribute("count",i);
}
/**//* 重新置位*/
function rePlaceInput(parent)
{
var tipAry=new Array();
var inputAry=new Array();
for(j=0;j <parent.childNodes.length;j++)
{
var node=parent.childNodes[j];
if(node.nodeType==1)
{
if(node.getAttribute("idi"))
{
inputAry.push(node);
}
else if(node.getAttribute("idt"))
{
tipAry.push(node);
}
}
}
for(j=0;j <tipAry.length;j++)
{
var position=getPosition(tipAry[j]);
inputAry[j].style.top=position.top+"px";
inputAry[j].style.left=position.left+"px";
}
return tipAry;
}
/**//*初始化IE*/
function initIE()
{
var form=document.forms["uploadForm"];
createIeInput(form);
window.onresize=function(){
rePlaceInput(form);
}
}
/**//* 初始化 */
function init()
{
if(isIE())
{
initIE();
}
else
{
initFirefox();
}
}
</script>
</HEAD>
<BODY onload="init()">
<form name="uploadForm" action="/upload.do" target="upload" enctype="multipart/form-data" method="post">
</form>
<iframe name="upload" style="display:none"> </iframe>
</BODY> </HTML>
===============================================
解答：
先給你段仿126的。。。
JScript code
<!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=gb2312" />
<title>測試附件</title>
<style type="text/css">
/**//*附件 開始*/
a.files, span.del_file {}{
overflow:hidden;
display:-moz-inline-box;
display:inline-block;
background:url(F2.gif);
}
a.files {}{
width:50px;
height:15px;
#vertical-align:middle;
}
a.files:hover {}{
background-position:0 -24px;
}
a.files input {}{
margin-left:-160px;
filter:alpha(opacity=0);
opacity:0;
}
span.del_file {}{
width:7px;
height:7px;
background-position:0 -51px;
vertical-align:middle;
#vertical-align:sub;
margin-left:2px;
cursor:pointer;
}
/**//*附件 結束*/
</style>
<script type="text/javascript">
var File = {
/**//*
模擬126的附件添加特效
-------------------------------------------------------
**num
為元素的下標
**count
為元素的個數
**name
為元素的名字和ID的前段（元素的實際名稱是前段加下標）
**status
為狀態的ID
**form
為表單的ID
-------------------------------------------------------
*/
num : 1, count : 0
, name : 'file', status : 'file', form : 'form'
, urls : {}
, add : function (file) {
//添加附件
if (this.urls[file.value]) {
alert('此文件已存在');
return false;
}
var a = file.parentNode, status = document.getElementById(this.status);
this.urls[file.value] = 1;
document.getElementById(this.form).appendChild(file);
if (/Firefox/.test(window.navigator.userAgent)) {
//中轉一下，否則FF里有很NB的錯誤會出現。。。
var b = a, a = a.cloneNode(true);
b.parentNode.replaceChild(a, b);
b = null;
}
file.style.display = 'none';
a.innerHTML = '<input id="' + this.name + (this.num + 1) + '" name="' + this.name + (this.num + 1) + '" onchange="File.add(this)" type="file" \/>';
status.innerHTML += ' <span>' + (/[^\\]+$/.exec(file.value)||'') + '<span class="del_file" onclick="File.del(this, ' + this.num + ')"><\/span>;<\/span>'
this.count ++, this.num ++, a = file= null;
}
, del : function (span, num) {
//刪除附件
var file = document.getElementById(this.name + num);
delete this.urls[file.value];
document.getElementById(this.form).removeChild(file);
span.parentNode.parentNode.removeChild(span.parentNode);
this.count --, span = num = null;
}
};
</script>
</head>
<body>
<a href="javascript:void(0);" class="files"><input id="file1" name="file1" onchange="File.add(this)" type="file" /></a>
<div id="file"></div>
<hr />
<form id="form" action="b.asp" method="post" enctype="multipart/form-data">
<input type="submit" value="提交" />
</form>
</body>
</html>
這是那張圖片的地址：
http://www.cntuw.com//attachment/week_0825/161_12090514_3c2aad3ea894112.gif
這個是那張圖片的地址。。
就是F2.gif
轉自：
http://topic.csdn.net/u/20080820/07/950ad96f-3e49-49d9-991c-274a4181b328.html
posted on 2008-12-08 19:42
CopyHoo 閱讀(371)
評論(0) 編輯 收藏 所屬分類:
JavaScript