js動態添加上傳文件按鈕（js自動上傳文件）

本文目錄一覽：

1、js如何上傳文件
2、幾種js實現的動態多文件上傳
3、用javascript寫了一個動態增加的按鈕
4、javascript 怎麼添加按鈕？
5、js及jquery實現動態的文件上傳操作按鈕的添加和刪除

js如何上傳文件

js採用File API 來上傳文件的。

File API 由一組 JavaScript 對象以及事件構成。賦予開發人員操作在 input type=”file” … / 文件選擇控件中選定文件的能力。圖 1 展示了 File API 所有的 JavaScript 的組合關係。

File API 簡單示例

body

h1File API Demo/h1

!– 用於文件上傳的表單元素 —

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

/body

運行效果：

幾種js實現的動態多文件上傳

方式一：事先寫好多個input.在點擊時才顯示。也就是說上傳的最大個數是寫死了的。

html

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

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

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

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

js動態添加上傳文件按鈕（js自動上傳文件）

本文目錄一覽：

js如何上傳文件

幾種js實現的動態多文件上傳

用javascript寫了一個動態增加的按鈕

javascript 怎麼添加按鈕？

js及jquery實現動態的文件上傳操作按鈕的添加和刪除

相關推薦

發表回復