js动态添加上传文件按钮(js自动上传文件)

本文目录一览:

js如何上传文件

js采用File API 来上传文件的。

File API 由一组 JavaScript 对象以及事件构成。赋予开发人员操作在 input type=”file” … / 文件选择控件中选定文件的能力。图 1 展示了 File API 所有的 JavaScript 的组合关系。

File API 简单示例

body

h1File API Demo/h1

p

!– 用于文件上传的表单元素 —

form name=”demoForm” id=”demoForm” method=”post” enctype=”multipart/form-data”

action=”javascript: uploadAndSubmit();”

pUpload File: input type=”file” name=”file” //p

pinput type=”submit” value=”Submit” //p

/form

divProgessing (in Bytes): span id=”bytesRead”

/span / span id=”bytesTotal”/span

/div

/p

/body

运行效果:

几种js实现的动态多文件上传

方式一:事先写好多个input.在点击时才显示。也就是说上传的最大个数是写死了的。

html

p

a href=’#’ onclick=’javascript:viewnone(more1)’ 添加附件 /a

div id=’more1′ style=’display:none’

input type=”file” name=”attach1″ size=”50″javascript:viewnone(more2)

/span

/div

div id=’more2′ style=’display:none’

input type=”file” name=”attach2″ size=”50″‘

/div

/p

js

SCRIPT language=”javascript”

function viewnone(e){

e.style.display=(e.style.display==”none”)?””:”none”;

}

/script

方式二:这种方式的动态多文件上传是实现了的,很简单的,不说废话看code

html

input type=”button” name=”button” value=”添加附件” onclick=”addInput()”

input type=”button” name=”button” value=”删除附件” onclick=”deleteInput()”

span id=”upload”/span

js

script type=”text/javascript”

var attachname = “attach”;

var i=1;

function addInput(){

if(i0){

var attach = attachname + i ;

if(createInput(attach))

i=i+1;

}

}

function deleteInput(){

if(i1){

i=i-1;

if(!removeInput())

i=i+1;

}

}

function createInput(nm){

var aElement=document.createElement(“input”);

aElement.name=nm;

aElement.id=nm;

aElement.type=”file”;

aElement.size=”50″;

//aElement.value=”thanks”;

//aElement.onclick=Function(“asdf()”);

if(document.getElementById(“upload”).appendChild(aElement) == null)

return false;

return true;

}

function removeInput(nm){

var aElement = document.getElementById(“upload”);

if(aElement.removeChild(aElement.lastChild) == null)

return false;

return true;

}

/script

方式三:动态多文件上传,只是在oFileInput.click();这个地方,这样做就不能上传这个文件了,因为发现它在上传之时就把这个input中的文件置空了。很可能是为了安全着想吧!

另外还有一点就是说,click()只有在ie中才能正常运行。

虽说这种方式最终没能实现上传,但还是留下来参考,看看是否有人可以真正实现上传。

html

A href=”javascript:newUpload();”添加附件/A

TABLE width=”100%” border=”0″ cellpadding=”0″ cellspacing=”1″

TBODY id=”fileList”/TBODY

/TABLE

DIV id=”uploadFiles” style=”display:block”/DIV

js

SCRIPT language=”javascript”

//—新建上传

function newUpload(){

var oFileList = document.getElementById(“fileList”);

var fileCount = oFileList.childNodes.length + 1;

var oFileInput = newFileInput(“upfile_” + fileCount);

if(selectFile(oFileInput)){

addFile(oFileInput);

}

}

//—-选择文件

function selectFile(oFileInput){

var oUploadFiles = document.getElementById(“uploadFiles”);

oUploadFiles.appendChild(oFileInput);

oFileInput.focus();

oFileInput.click();//不能这样做,可能是为了安全着想吧!

var fileValue = oFileInput.value;

if(fileValue == “”){

oUploadFiles.removeChild(oFileInput);

return false;

}

else

return true;

}

//—新建一个文件显示列表

function addFile(oFileInput){

var oFileList = document.getElementById(“fileList”);

var fileIndex = oFileList.childNodes.length + 1;

var oTR = document.createElement(“TR”);

var oTD1 = document.createElement(“TD”);

var oTD2 = document.createElement(“TD”);

oTR.setAttribute(“id”,”file_” + fileIndex);

oTR.setAttribute(“bgcolor”,”#FFFFFF”);

oTD1.setAttribute(“width”,”6%”);

oTD2.setAttribute(“width”,”94%”);

oTD2.setAttribute(“align”,”left”);

oTD2.innerText = oFileInput.value;

oTD1.innerHTML = ‘A href=”javascript:removeFile(‘+ fileIndex + ‘);”删除/A’;

oTR.appendChild(oTD1);

oTR.appendChild(oTD2);

oFileList.appendChild(oTR);

}

//—移除上传的文件

function removeFile(fileIndex){

var oFileInput = document.getElementById(“upfile_” + fileIndex);

var oTR = document.getElementById(“file_” + fileIndex);

uploadFiles.removeChild(oFileInput);

fileList.removeChild(oTR);

}

//—创建一个file input对象并返回

function newFileInput(_name){

var oFileInput = document.createElement(“INPUT”);

oFileInput.type = “file”;

oFileInput.id = _name;

oFileInput.name = _name;

oFileInput.size=”50″;

//oFileInput.setAttribute(“id”,_name);

//oFileInput.setAttribute(“name”,_name);

//oFileInput.outerHTML = ‘INPUT type=file id=’ + _name + ‘ name=’ + _name + ”;

//alert(oFileInput.outerHTML);

return oFileInput;

}

/SCRIPT

用javascript写了一个动态增加的按钮

是安全性问题,浏览器不允许脚本修改上传表单的内容

如果不是上传文件,就把form的enctype改掉就可以了,

如果是需要上传文件,这种动态的上传框只有flash可以做到

或者你多写几个隐藏的上传框,用脚本把它显示出来试试

javascript 怎么添加按钮?

借助JQuery更简单实现,这里是一个用原生javascript实现的示例:

html

head

title/title

script type=”text/javascript”

function addButton(){

var html =”input type=\”button\” value=\”新加\” onclick=\”newButton();\””;

document.getElementById(“add”).innerHTML=html;

}

function newButton(){

alert(“我是新加的按钮”);

}

/script

/head

body

div

p点击该按钮增加一个新按钮/p

input type=”button” value=”点击增加” onclick=”addButton();”

p新增的按钮在这显示/p

div id=”add”/div

/div

/body

/html

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。

它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

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

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

javascript实现

代码如下:

!DOCTYPE

html

PUBLIC

“-//W3C//DTD

XHTML

1.0

Transitional//EN”

“”

html

xmlns=””

head

meta

http-equiv=”Content-Type”

content=”text/html;

charset=utf-8″

/

titlejquery文件上传/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”

“”

html

xmlns=””

head

meta

http-equiv=”Content-Type”

content=”text/html;

charset=utf-8″

/

titlejquery文件上传/title

titlejquery1/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

原创文章,作者:小蓝,如若转载,请注明出处:https://www.506064.com/n/242273.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
小蓝小蓝
上一篇 2024-12-12 12:47
下一篇 2024-12-12 12:47

相关推荐

  • JS Proxy(array)用法介绍

    JS Proxy(array)可以说是ES6中非常重要的一个特性,它可以代理一个数组,监听数据变化并进行拦截、处理。在实际开发中,使用Proxy(array)可以方便地实现数据的监…

    编程 2025-04-29
  • QML 动态加载实践

    探讨 QML 框架下动态加载实现的方法和技巧。 一、实现动态加载的方法 QML 支持从 JavaScript 中动态指定需要加载的 QML 组件,并放置到运行时指定的位置。这种技术…

    编程 2025-04-29
  • Python爱心代码动态

    本文将从多个方面详细阐述Python爱心代码动态,包括实现基本原理、应用场景、代码示例等。 一、实现基本原理 Python爱心代码动态使用turtle模块实现。在绘制一个心形的基础…

    编程 2025-04-29
  • 解析js base64并转成unit

    本文将从多个方面详细介绍js中如何解析base64编码并转成unit格式。 一、base64编码解析 在JavaScript中解析base64编码可以使用atob()函数,它会将b…

    编程 2025-04-29
  • Node.js使用Body-Parser处理HTTP POST请求时,特殊字符无法返回的解决方法

    本文将解决Node.js使用Body-Parser处理HTTP POST请求时,特殊字符无法返回的问题。同时,给出一些相关示例代码,以帮助读者更好的理解并处理这个问题。 一、问题解…

    编程 2025-04-29
  • t3.js:一个全能的JavaScript动态文本替换工具

    t3.js是一个非常流行的JavaScript动态文本替换工具,它是一个轻量级库,能够很容易地实现文本内容的递增、递减、替换、切换以及其他各种操作。在本文中,我们将从多个方面探讨t…

    编程 2025-04-28
  • 使用easypoi创建多个动态表头

    本文将详细介绍如何使用easypoi创建多个动态表头,让表格更加灵活和具有可读性。 一、创建单个动态表头 easypoi是一个基于POI操作Excel的Java框架,支持通过注解的…

    编程 2025-04-28
  • Python动态输入: 从基础使用到应用实例

    Python是一种高级编程语言,因其简单易学和可读性而备受欢迎。Python允许程序员通过标准输入或命令行获得用户输入,这使得Python语言无法预测或控制输入。在本文中,我们将详…

    编程 2025-04-28
  • JS图片沿着SVG路径移动实现方法

    本文将为大家详细介绍如何使用JS实现图片沿着SVG路径移动的效果,包括路径制作、路径效果、以及实现代码等内容。 一、路径制作 路径的制作,我们需要使用到SVG,SVG是可缩放矢量图…

    编程 2025-04-27
  • Access执行按钮的实现方法及应用场景

    本文将详细介绍Access执行按钮的实现方法及其在实际应用场景中的使用方法。 一、创建Access执行按钮的方法 在Access中,创建执行按钮的方法非常简单。只需要按照以下步骤进…

    编程 2025-04-27

发表回复

登录后才能评论