js中动态添加的Input file 控件,我怎么获取到它上传的图片呢?请教各位大神!

js中动态添加的Input file 控件,我怎么获取到它上传的图片呢?请教各位大神!,第1张

方法一:你可以把你上传的图片,放到数据库中的某个表中,然后,你查询表获得;

方法二:你上传图片成功以后,返回jsp 一个上传图片放置的路径,你把这个路径setValue到

<input id="tee" type="hidden"/>

通过$("#tee").val()获得路径,通过ajax,在后台通过url获得图片;

本文为大家介绍下使用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>

1、如果你只是想向repeat里添加一个DropDownList可以把思路换换。

2、JS是客户端脚本,不回传服务器,所以你别添加服务器控件

3、添加一个<select>...</select>HTML控件好了,就是你现在的写的ADD方法就OK了

4、后台用reuqest.form("控件名")获取数据。一定要添加服务器端控件,那就别用JS


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

原文地址: http://outofmemory.cn/bake/11819545.html

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

发表评论

登录后才能评论

评论列表(0条)

保存