这样的Javascript怎样写啊？

wodexiaopu2 2009-07-21 09:23:04

画面中有一个fileupload控件，
当这个控件onchange的时候，把该fileupload控件移到其他地方并隐藏
同时在同一个位置创建一个新的fileupload控件。。。。

求教高人啊？？？



<div id="upDiv">

<input type="file" id="fileInput" runat="server" onchange="SetFileInfo(this.id);return false;" /></div>

<script language="javascript">

function SetFileInfo(fileId) 

{

  var fileTop = document.getElementById(fileId).style.top;

  var fileLeft = document.getElementById(fileId).style.left;



  document.getElementById(fileId).style.top = "0";

  document.getElementById(fileId).style.left = "0";



  var W3CDOM = (document.createElement && document.getElementsByTagName);

  if (!W3CDOM) return;

  var fakeFileUpload = document.createElement('div');

  var str = '<input type="file" name="file" onchange="SetFileInfo(this.id);return false;" ' +

      'style="top:' + fileTop + 'left:' + fileLeft + '"/>;



    document.getElementById('upDiv').insertAdjacentHTML("beforeEnd", str)；

}

</script>


这样是不好用的啊。。。。

急急急。。。。
...全文
1509 19 打赏 收藏 转发到动态 举报
写回复
用AI写文章
19 条回复
切换为时间正序
请发表友善的回复…
发表回复
iamability 2009-08-05
  • 打赏
  • 举报
 回复
我记得phpwind源码里面有一个这个功能的
楼主有兴趣可以去研究研究
hnsdwhl 2009-07-27
  • 打赏
  • 举报
 回复
学习
wodexiaopu2 2009-07-21
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 jinglecat 的回复:]
这不有现成的嘛？
http://www.fyneworks.com/jquery/multiple-file-upload/
[/Quote]

这个真的很好啊，可我不会改JQuery里面的东西，和要求的样式差很多啊，555
wodexiaopu2 2009-07-21
  • 打赏
  • 举报
 回复
[Quote=引用 15 楼 saisky 的回复:]
onchange就隐藏了
你考虑过弊端没有？如果用户选择了一个文件后，就把这个file隐藏掉，创建第2个file
那用户要想修改第一个file中的文件怎么办？你是不是还要做一个对应显示的功能？
没必要隐藏，多文件上传可以仿网易邮箱的上传方式

[/Quote]

不需要修改已经选中的file了，只能删除掉的。。。
saisky 2009-07-21
  • 打赏
  • 举报
 回复
onchange就隐藏了
你考虑过弊端没有？如果用户选择了一个文件后，就把这个file隐藏掉，创建第2个file
那用户要想修改第一个file中的文件怎么办？你是不是还要做一个对应显示的功能？
没必要隐藏，多文件上传可以仿网易邮箱的上传方式
hsabout 2009-07-21
  • 打赏
  • 举报
 回复
[Quote=引用 11 楼 wodexiaopu2 的回复:]
引用 4 楼 hsabout 的回复:
JScript code// JScript 檔var fileIndex=0;var dic=new ActiveXObject("Scripting.Dictionary");var root="divAttach";var divid="divitem";var fileid="fileitem";var lblid="labelitem";var imgid="imgitem";var imgsrc="IMG/delete.gif";var css="Label";var height="height:25px;";function addFile()
{var id= divid+ fileIndex;var itemid= fileid+ fileIndex;var obj= document.getElementById(id);if(obj==null)
    {var div= document.createElement("DIV");
        div.id= id;var html=" <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"> <tr style=\""+ height+"\"> <td>"
        html+=" <INPUT type=\"file\" onchange=\"getFile(this);\" onkeydown=\"CheckKeyDown(this)\" name=\""+ itemid+"\"/>";
        html+=" </td> <td>";var lblitemid= lblid+ fileIndex;var imgitemid= imgid+ fileIndex;
        html+=" <div class=\""+ css+"\" id='"+ lblitemid+"'> <img src=\""+ imgsrc+"\" onmouseover=\"this.style.cursor='hand';\" onclick=\"delFile('"+ id+"');\"> </img> </div>";
        html+=" </td> </tr> </table>";
        div.innerHTML= html;
        document.getElementById(root).appendChild(div);
    }
}function getFile(obj)
{if(CheckFileSize(obj))
    {var path= obj.value;var id= divid+ fileIndex;if(valueExists(path))
        {
            alert("File already exist.");
            delFile(id);returnfalse;
        }var list= path.split('\\');var filename= list[list.length-1];var lblitemid= lblid+ fileIndex;var div= document.getElementById(lblitemid);var temp= div.innerHTML;
        div.innerHTML="";
        div.appendChild(document.createTextNode(filename));
        div.appendChild(document.createTextNode(""));
        div.innerHTML= div.innerHTML+ temp;var itemid= fileid+ fileIndex;var item= document.getElementById(itemid);
        item.style.display="none";
       
        dic.Add(id , path);
        fileIndex++;
    }
}function delFile(id)
{var div= document.getElementById(root);var item= document.getElementById(id);if (div!=null&& item!=null)
    {
        div.removeChild(item);//从数据字典移除if(keyExists(id))
        {
            dic.Remove(id);
        }
    }
}function keyExists(key)
{
  a= (new VBArray(dic.Keys())).toArray();//获取键值。for (iin a)//遍历该 dictionary。  {if(a[i]== key)returntrue;
  }returnfalse;
}function valueExists(value)
{
  a= (new VBArray(dic.Items())).toArray();//获取键值。for (iin a)//遍历该 dictionary。  {if(a[i]== value)returntrue;
  }returnfalse;
}function CheckFileSize(obj)
{var maxLength=4096000;//4Mvar totalLength=5120000;//5Mvar fso=new ActiveXObject('Scripting.FileSystemObject');if(obj.value.trim()!="")
    {var file= fso.GetFile(obj.value);if(file.Size>maxLength)
        {
            alert('The size of attachment exceed 4Mb.');
            obj.outerHTML=obj.outerHTML;returnfalse;
        }var total=0;var input_file=document.getElementsByTagName("INPUT");for (var i=0; i <input_file.length; i++)
        {if (input_file[i].type=="file")
            {var iFile= fso.GetFile(input_file[i].value);
                total+= iFile.Size;
            }
        }if(total> totalLength)
        {
            alert('The sum of all attachment size exceed 5Mb.');
            obj.outerHTML=obj.outerHTML;returnfalse;
        }
    }returntrue;
}

String.prototype.trim=function() 
{returnthis.replace(/(^\s*)|(\s*$)/g,""); 
}function CheckKeyDown(obj)
{if(window.event.keyCode!=8&&window.event.keyCode!=46)
    {
        window.event.returnValue=false;
    }else
    {
        window.event.returnValue=false;
        obj.outerHTML=obj.outerHTML;
    }
}


<html>
<input id="btnAttach" class="button" onclick="addFile()" type="button" value="Attachment" />
<div id="divAttach"> </div>
</html>

這是我寫的,看適合你用不?


这个是每次显示出多个upload控件啊，我是只想要一个的
[/Quote]
上面的代碼只顯示一個 fileupload的,當選擇了文件之后就會看不見,永遠只會顯示一個fileupload
但是你選過的文件就會用div顯示出來
gongsun 2009-07-21
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 jinglecat 的回复:]
这不有现成的嘛？
http://www.fyneworks.com/jquery/multiple-file-upload/
[/Quote]

jQuery Multiple File Upload Plugin
langziqian 2009-07-21
  • 打赏
  • 举报
 回复
帮顶
wodexiaopu2 2009-07-21
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 hsabout 的回复:]
JScript code// JScript 檔var fileIndex=0;var dic=new ActiveXObject("Scripting.Dictionary");var root="divAttach";var divid="divitem";var fileid="fileitem";var lblid="labelitem";var imgid="imgitem";var imgsrc="IMG/delete.gif";var css="Label";var height="height:25px;";function addFile()
{var id= divid+ fileIndex;var itemid= fileid+ fileIndex;var obj= document.getElementById(id);if(obj==null)
{var div= document.createElement("DIV");
div.id= id;var html="<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr style=\""+ height+"\"><td>"
html+="<INPUT type=\"file\" onchange=\"getFile(this);\" onkeydown=\"CheckKeyDown(this)\" name=\""+ itemid+"\"/>";
html+="</td><td>";var lblitemid= lblid+ fileIndex;var imgitemid= imgid+ fileIndex;
html+="<div class=\""+ css+"\" id='"+ lblitemid+"'><img src=\""+ imgsrc+"\" onmouseover=\"this.style.cursor='hand';\" onclick=\"delFile('"+ id+"');\"></img></div>";
html+="</td></tr></table>";
div.innerHTML= html;
document.getElementById(root).appendChild(div);
}
}function getFile(obj)
{if(CheckFileSize(obj))
{var path= obj.value;var id= divid+ fileIndex;if(valueExists(path))
{
alert("File already exist.");
delFile(id);returnfalse;
}var list= path.split('\\');var filename= list[list.length-1];var lblitemid= lblid+ fileIndex;var div= document.getElementById(lblitemid);var temp= div.innerHTML;
div.innerHTML="";
div.appendChild(document.createTextNode(filename));
div.appendChild(document.createTextNode(""));
div.innerHTML= div.innerHTML+ temp;var itemid= fileid+ fileIndex;var item= document.getElementById(itemid);
item.style.display="none";

dic.Add(id , path);
fileIndex++;
}
}function delFile(id)
{var div= document.getElementById(root);var item= document.getElementById(id);if (div!=null&& item!=null)
{
div.removeChild(item);//从数据字典移除if(keyExists(id))
{
dic.Remove(id);
}
}
}function keyExists(key)
{
a= (new VBArray(dic.Keys())).toArray();//获取键值。for (iin a)//遍历该 dictionary。 {if(a[i]== key)returntrue;
}returnfalse;
}function valueExists(value)
{
a= (new VBArray(dic.Items())).toArray();//获取键值。for (iin a)//遍历该 dictionary。 {if(a[i]== value)returntrue;
}returnfalse;
}function CheckFileSize(obj)
{var maxLength=4096000;//4Mvar totalLength=5120000;//5Mvar fso=new ActiveXObject('Scripting.FileSystemObject');if(obj.value.trim()!="")
{var file= fso.GetFile(obj.value);if(file.Size>maxLength)
{
alert('The size of attachment exceed 4Mb.');
obj.outerHTML=obj.outerHTML;returnfalse;
}var total=0;var input_file=document.getElementsByTagName("INPUT");for (var i=0; i<input_file.length; i++)
{if (input_file[i].type=="file")
{var iFile= fso.GetFile(input_file[i].value);
total+= iFile.Size;
}
}if(total> totalLength)
{
alert('The sum of all attachment size exceed 5Mb.');
obj.outerHTML=obj.outerHTML;returnfalse;
}
}returntrue;
}

String.prototype.trim=function()
{returnthis.replace(/(^\s*)|(\s*$)/g,"");
}function CheckKeyDown(obj)
{if(window.event.keyCode!=8&&window.event.keyCode!=46)
{
window.event.returnValue=false;
}else
{
window.event.returnValue=false;
obj.outerHTML=obj.outerHTML;
}
}


<html>
<input id="btnAttach" class="button" onclick="addFile()" type="button" value="Attachment" />
<div id="divAttach"> </div>
</html>

這是我寫的,看適合你用不?
[/Quote]

这个是每次显示出多个upload控件啊，我是只想要一个的
Lakers_24号程序员 2009-07-21
  • 打赏
  • 举报
 回复 


<style type="text/css">

span.addfile

{

	background-image:url(../../images/ico/jony1.gif);

	background-repeat:no-repeat;

	display:block;

	float:left;

	height:16px;

	position:relative;

	text-decoration:none;

	width:68px;

}



input.addfile {

	cursor:pointer !important;

	height:22px;

	left:-5px;

	filter:alpha(opacity=0); 

	position:absolute;

	width:1px;

	z-index: -1;

}

</style>
Lakers_24号程序员 2009-07-21
  • 打赏
  • 举报
 回复 


// JScript 文件

//--------------------附件上传--Start--------------------

    var x=0;                 //初始化数组为0，之后随着附件数量变化来变化

    var num = 1;             //file 控件数组下标,从1开始,默认显示一个所以那个是 0

    function addFile() {

        

	    var str = '<span class="addfile" id="span' + num +'"><input type="file" size="50" class="addfile" onchange="addFile()" name="uploadFile[' + num + '].file" ' + '/></span>';	//待插入的文件控件		

        var fileText = document.all("uploadFile[" + x + "].file").value;        //得到文件控件的值

		var ary = fileText.split("\\");                  				        //分割文件,以'\'号	

  	    var fileTextValue = ary[ary.length-1];                                  //取出最后的文件名 

		document.all("span" + x).style.display = "none";		                //将前一个 P 的子元素设为不可见

		

	    //在前面一个 File 控件隐藏后,接着再在原来的位置上插入一个

   	    document.getElementById('MyFile').insertAdjacentHTML("beforeEnd",str);



   	    var fileName = "<div id='newAttach" + x + "' style='float:left;margin:6px 12px 0px 4px;' nowrap='nowrap'><img src='../../images/Attach/Attach.gif' alt='' border=0/> <span id='" + x + "'></span>";

        fileName = fileName + " <a href='javascript:DelAttach(\"newAttach" + x + "\",\"span" + x + "\")'><img src='../../Images/Ico/DELETE0.GIF' style='cursor:hand' height='14px' align='absmiddle' border=0></a></div>";

	    newAttachDiv.innerHTML =newAttachDiv.innerHTML + fileName;

	    document.getElementById(x).insertAdjacentText("beforeBegin",fileTextValue);

		x++;

		num++;

		//alert(num);

    }

    

    //作用：删除已有的附件

    // divID:容器DIV对象的ID

    // id:附件的ID

    // delObj:存储删除的附件ID

    function DelAttach(divID,id,delObj)

    {

        var targetObj =document.getElementById(divID);

        if (targetObj ==null) 

		    alert("操作的对象为空，无法删除！");

	    else

		    targetObj.outerHTML="";

		

		if (typeof(delObj) !="undefined")

		{

            //删除已存在的附件（将需要删除的附件ID保存到隐藏域中）

		    var delIDs =delObj.value;

		    if (delIDs =="")

		    {

		        delIDs =",";

		    }

		    delIDs += id +",";

		    delObj.value =delIDs;

		}

		else

		{

		    //删除新增且尚未保存的附件

		    var newObj =document.getElementById(id);

		    newObj.outerHTML="";

		}

    }

//--------------------附件上传--End------------------








 <!--B添加附件-->

                                <div style="width:100%;">

                                    <p id="MyFile">

                                        <span class="addfile" id="span0">

                                            <input type="file" class="addfile" onchange="addFile()" size="1" name="uploadFile[0].file"/>

                                        </span>

                                    </p>

                                </div>

                                <div id="newAttachDiv"></div>

                            <!--E添加附件-->
wodexiaopu2 2009-07-21
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 dowoocn 的回复:]
看来楼主是想上传多个附件，但界面上只显示一个fileupload
[/Quote]

对啊，我就是想要这个效果啊

帮帮忙啊
Jinglecat 2009-07-21
  • 打赏
  • 举报
 回复
这不有现成的嘛？
http://www.fyneworks.com/jquery/multiple-file-upload/
dowoocn 2009-07-21
  • 打赏
  • 举报
 回复
看来楼主是想上传多个附件，但界面上只显示一个fileupload
hsabout 2009-07-21
  • 打赏
  • 举报
 回复
上面寫的是我用來實現多文件上傳的方法,你看下適合你用不
hsabout 2009-07-21
  • 打赏
  • 举报
 回复 
// JScript 檔

var fileIndex = 0;

var dic = new ActiveXObject("Scripting.Dictionary");

var root = "divAttach";

var divid = "divitem";

var fileid = "fileitem";

var lblid = "labelitem";

var imgid = "imgitem";

var imgsrc = "IMG/delete.gif";

var css = "Label";

var height = "height:25px;";



function addFile()

{

    var id = divid + fileIndex;

    var itemid = fileid + fileIndex;

    var obj = document.getElementById(id);

    if(obj == null)

    {

        var div = document.createElement("DIV");

        div.id = id;

        var html = "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr style=\"" + height + "\"><td>"

        html += "<INPUT type=\"file\" onchange=\"getFile(this);\" onkeydown=\"CheckKeyDown(this)\" name=\"" + itemid + "\"/>";

        html += "</td><td>";

        var lblitemid = lblid + fileIndex;

        var imgitemid = imgid + fileIndex;

        html += "<div class=\"" + css + "\" id='" + lblitemid + "'><img src=\"" + imgsrc + "\" onmouseover=\"this.style.cursor='hand';\" onclick=\"delFile('" + id + "');\"></img></div>";

        html += "</td></tr></table>";

        div.innerHTML = html;

        document.getElementById(root).appendChild(div);

    }

}



function getFile(obj)

{

    if(CheckFileSize(obj))

    {

        var path = obj.value;

        var id = divid + fileIndex;

        if(valueExists(path))

        {

            alert("File already exist.");

            delFile(id);

            return false;

        }

        var list = path.split('\\');

        var filename = list[list.length - 1];

        

        var lblitemid = lblid + fileIndex;

        var div = document.getElementById(lblitemid);

        var temp = div.innerHTML;

        div.innerHTML = "";

        div.appendChild(document.createTextNode(filename));

        div.appendChild(document.createTextNode(" "));

        div.innerHTML = div.innerHTML + temp;

        

        var itemid = fileid + fileIndex;

        var item = document.getElementById(itemid);

        item.style.display="none";

        

        dic.Add(id , path);

        fileIndex++;

    }

}



function delFile(id)

{

    var div = document.getElementById(root);

    var item = document.getElementById(id);

    if (div != null && item != null)

    {

        div.removeChild(item);

        //从数据字典移除

        if(keyExists(id))

        {

            dic.Remove(id);

        }

    }

}



function keyExists(key)

{

   a = (new VBArray(dic.Keys())).toArray();//获取键值。     

   for (i in a)//遍历该 dictionary。

   {

      if(a[i] == key)

        return true;

   }

   return false;

}



function valueExists(value)

{

   a = (new VBArray(dic.Items())).toArray();//获取键值。     

   for (i in a)//遍历该 dictionary。

   {

      if(a[i] == value)

        return true;

   }

   return false;

}



function CheckFileSize(obj)

{

    var maxLength = 4096000;//4M

    var totalLength = 5120000;//5M

    var fso = new ActiveXObject('Scripting.FileSystemObject');

    if(obj.value.trim()!="")

    {

        var file = fso.GetFile(obj.value);

        if(file.Size>maxLength)

        {

            alert('The size of attachment exceed 4Mb.');

            obj.outerHTML=obj.outerHTML;

		    return false;

        }

        var total = 0;

        var input_file=document.getElementsByTagName("INPUT");

	    for (var i=0; i<input_file.length; i++)

	    { 

		    if (input_file[i].type=="file") 

		    {

		        var iFile = fso.GetFile(input_file[i].value);

			    total += iFile.Size;

		    } 

	    }

	    if(total > totalLength)

	    {

	        alert('The sum of all attachment size exceed 5Mb.');

            obj.outerHTML=obj.outerHTML;

		    return false;

	    }

    }

    return true;

}



String.prototype.trim= function()  

{  

	return this.replace(/(^\s*)|(\s*$)/g, "");  

}



function CheckKeyDown(obj)

{

	if(window.event.keyCode!=8&&window.event.keyCode!=46)

	{

		window.event.returnValue=false;

	}

	else

	{

		window.event.returnValue=false;

		obj.outerHTML=obj.outerHTML;

	}

}



<html>
<input id="btnAttach" class="button" onclick="addFile()" type="button" value="Attachment" />
<div id="divAttach"></div>
</html>

這是我寫的,看適合你用不?
wodexiaopu2 2009-07-21
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 hsabout 的回复:]
用意何在?
為什么隱藏一個,又新增一個?
[/Quote]

我要实现一个多文件上传的功能，用户的角度就是只有一个上传控件，可以选择多次文件，然后一起上传。。。
hsabout 2009-07-21
  • 打赏
  • 举报
 回复
用意何在?
為什么隱藏一個,又新增一個?
wodexiaopu2 2009-07-21
  • 打赏
  • 举报
 回复
UP一下

没人啊？
Javascript写在哪里？
Javascript写在哪里？概括起来就是三种形式： 1. 内部：Html网页的中； 2. 内部：Html网页的中； 3. 外部：外部JS文件里。 (1) Javascript写在中 当浏览器载入网页Body部分的时候，就执行其中的Javascript语句，执行...
Javascript是什么？java是什么？JavaScript与Java有什么关系？
Javascript是什么？ Javascript是一bai种由Netscape的LiveScript发展而来的脚本语言，主要目的是du为了解zhi决服务器终端语言，比如Perl，遗dao留的速度问题。当时服务端需要对数据进行验证，由于网络速度相当缓慢，...
JavaScript中到底要不要写分号呢？
在我们介绍 JavaScript 语法的全局结构之前，我们先要探讨一个语言风格问题：究竟要不要写分号? 这是一个非常经典的口水问题，“加分号”党和“不写分号”党之间的战争，可谓是经久不息。 实际上，行尾使用分号的...
学javascript看什么书？
JavaScript是一种属于网络的脚本语言，被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。那么如何学javascript？下面本篇文章就来给大家推荐一些学习javascript的书籍...
什么是JavaScript中的Promise？
什么是JavaScript中的Promise？
.NET社区

62,254

社区成员

668,981

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章