PHP(15) 文件上傳(含動態文件)(版本II)

時間 2020-07-19

標籤 php 文件上傳動態版本欄目 PHP 简体版

原文原文鏈接

PHP(15) 文件上傳(含動態文件)(版本II)

首先，感謝各位朋友的支持，咱們儘可能去完善博客內容，若是有什麼不足，請你們多多指教，在這裏先謝了！

在上一篇博文中，咱們曾經用JS實現了動態附件的添加。其實其原理就是經過HTML DOM節點的複製來實現的！今天，咱們再經過JS來實現另外一個版本的動態附件添加，其原理是：經過JS動態來建立HTML DOM節點！

其源代碼以下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<head>

var i = 0;

var allowFileType = "gif|jpg|jpeg|png";

var uploadedFileArr = new Array();

function $(objId)

{

return document.getElementById(objId);

}

function getFileName(filePath)

{

var fileName = (filePath.indexOf("\\") == -1) ? filePath : filePath.substr(filePath.lastIndexOf(" \\")+1 );

return fileName;

}

function getExtName(fileName)

{

var extName = fileName.substr(fileName.lastIndexOf(".")+1).toLowerCase();

return extName;

}

function validFileType(fileName)

{

var extName = getExtName(fileName);

if(allowFileType.indexOf(extName) != -1)

{

return true;

}

return false;

}

function checkFileExists(filePath)

{

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

{

if(uploadedFileArr[i] == escape(filePath))

{

return true;

}

return false;

}

function addFileToArray(filePath)

{

uploadedFileArr.push(escape(filePath));

}

function removeFileFromArray(filePath)

{

var tmpFileArr = new Array();

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

{

if(uploadedFileArr[i] != escape(filePath))

{

tmpFileArr.push(uploadedFileArr[i]);

}

uploadedFileArr = tmpFileArr;

}

function getAttachNum()

{

var attachListObject = $("attachList");

var attachRowsNum = attachListObject.getElementsByTagName("tr").length;

return attachRowsNum;

}

function hasSelectedFile()

{

var attachRowsNum = getAttachNum();

var rowObjects = $("attachList").getElementsByTagName("tr");

if(attachRowsNum)

{

var lastRowObject = rowObjects[rowObjects.length-1];

var lastSpanObject = lastRowObject.getElementsByTagName("span")[0];

return lastSpanObject.innerHTML

}

return false;

}

function addAttach()

{

if(hasSelectedFile() || i==0)

{

var attachListObject = $("attachList");

//建立對象開始
var rowObject = document.createElement("tr");

var cellObject = document.createElement("td");

var spanObject = document.createElement("span");

var fileObject = document.createElement("input");

var linkObject = document.createElement("a");

//設置對象屬性

var rowId = "row" + i;

rowObject.id = rowId;

fileObject.type = "file" ;

fileObject.name = "uploadFile[]";

linkObject.href = "#";

linkObject.innerHTML = "刪除附件";

linkObject.style.display = "none";

//設置對象事件

fileObject.onchange = function()

{

var fileObjectVal = fileObject.value;

var fileName = getFileName(fileObjectVal);

if(validFileType(fileName))

{

//if(!checkFileExists(fileObjectVal))

//{

spanObject.innerHTML = fileName;

fileObject.style.display = "none";

linkObject.style.display = "";

//addFileToArray(fileObjectVal);

//}

//else

//{

// removeAttach(rowId);

// addAttach();

// showInfo(fileExists);

//}

}

else

{

removeAttach(rowId);

addAttach();

showInfo(fileTypeIsWrong);

}

linkObject.onclick = function()

{

removeAttach(rowId);

}

//依次添加對象

cellObject.appendChild(spanObject);

cellObject.appendChild(fileObject);

cellObject.appendChild(linkObject);

rowObject.appendChild(cellObject);

attachListObject.appendChild(rowObject);

i++;

}

else

{

showInfo(selectFileFirst);

}

function removeAttach(rowId)

{

var attachListObject = $("attachList");

var rowObject = $(rowId);

attachListObject.removeChild(rowObject);

//var fileObjectValue = rowObject.getElementsByTagName("input")[0].value;

//removeFileFromArray(fileObjectValue);

i--;

}

function showInfo(message)

{

window.alert(message);

}

var selectFileFirst = "選擇文件後，才能夠添加附件!";

var fileTypeIsWrong = "文件格式不支持,附件文件只能爲圖片格式!";

var fileExists = "文件已經存在於附件列表內!";

</script>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

</div>

</body>

</html>

具體的PHP文件我沒有實現，請你們參照之前的博文！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。