js及jquery实现动态的文件上传 *** 作按钮的添加和删除

js及jquery实现动态的文件上传 *** 作按钮的添加和删除,第1张

本文为大家介绍下使用js及jquery实现动态的文件上传 *** 作按钮的添加和删除,具体示例如下,希望对大家有所帮助

javascript实现

代码如下:

<!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>jquery文件上传</title>

<script

type="text/javascript"

src="jquery-1.7.2.js"></script>

<script

type="text/javascript">

var

addMore

=

function()

{

var

div

=

document.getElementById("div2")

var

br

=

document.createElement("br")

var

input

=

document.createElement("input")

var

button

=

document.createElement("input")

input.setAttribute("type",

"file")

button.setAttribute("type",

"button")

button.setAttribute("value",

"Remove")

button.onclick

=

function()

{

div.removeChild(br)

div.removeChild(input)

div.removeChild(button)

}

div.appendChild(br)

div.appendChild(input)

div.appendChild(button)

}

//节点的移动

//$(function(){

//})

</script>

</head>

<body>

<div

id="div1">

<input

type="file"

id="upload"/>

<input

type="button"

id="btn"

value="more"

onclick="addMore()"/>

</div>

<div

id="div2"></div>

</body>

</html>

jquery实现

代码如下:

<!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>jquery文件上传</title>

<title>jquery1</title>

<script

type="text/javascript"

src="jquery-1.7.2.js"></script>

<script

type="text/javascript">

/**

var

addMore

=

function()

{

var

div

=

document.getElementById("div2")

var

br

=

document.createElement("br")

var

input

=

document.createElement("input")

var

button

=

document.createElement("input")

input.setAttribute("type",

"file")

button.setAttribute("type",

"button")

button.setAttribute("value",

"Remove")

button.onclick

=

function()

{

div.removeChild(br)

div.removeChild(input)

div.removeChild(button)

}

div.appendChild(br)

div.appendChild(input)

div.appendChild(button)

}**/

//jquery实现文件上传的按钮添加和删除

$(function(){

$("input[type=button]").click(function(){

var

br

=

$("<br>")

var

input

=

$("<input

type='file'/>")

var

button

=

$("<input

type='button'

value='Remove'/>")

$("#div1").append(br).append(input).append(button)

button.click(function()

{

br.remove()

input.remove()

button.remove()

})

})

})

</script>

</head>

<body>

<div

id="div1">

<input

type="file"

id="upload"/>

<input

type="button"

id="btn"

value="more"

onclick="addMore()"/>

</div>

<div

id="div2"></div>

</body>

</html>

不知道你服务器端用什么语言处理的? 

C#里面处理过,可以用request.files获得所有上传文件(HttpPostedFile

)的一个集合,你可以查一下msdn:http://msdn.microsoft.com/zh-cn/library/system.web.httprequest.files(v=VS.80).aspx

string savePath = @"d:\upload"

for(HttpPostedFile f in request.files){

  string fileName = f.FileName

  f.SaveAs(path.Combine(savepath,fileName))

}

其他语言应该也有类似的对象来处理吧.

如果需要用原生js动态的加载另外一个js文件,可以使用原生js的document.createElement方法创建script节点,然后更改该节点的type和src属性,最后通过appendChild方法将该节点动态添加到html中,这样就可以了,参考代码如下:

var new_element = document.createElement("script")//创建新的script节点new_element.setAttribute("type", "text/javascript")new_element.setAttribute("src", "../js/jquery.js")document.body.appendChild(new_element)//添加到body节点的末尾

上例中是在body的最末尾添加的,当然同样可以在head中添加引用该js的标签:document.head.appendChild(new_element)


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11962895.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存