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 ">

<html xmlns=" http://www.w3.org/1999/xhtml ">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>附件上传(版本II)</title>

<link href="style/common.css" rel="stylesheet" type="text/css" media="all" />

<script language="javascript">

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>

<div id="container">

<h1 class="subject">添加博文</h1>
 
<form action="uploadFile.php" method="post" enctype="multipart/form-data" name="form1" id="form1">

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td class="borderBottom tdNum">博文标题</td>

<td class="borderBottom">xxx</td>

</tr>

<tr>

<td class="borderBottom tdNum">博文内容</td>

<td class="borderBottom">xxx</td>

</tr>

<tr>

<td valign="top" class="borderBottom tdNum">附件管理</td>

<td class="borderBottom"><a href="#" id="attachList"></tbody></table></td>

</tr>

<tr>

<td>&nbsp;</td>

<td><input type="submit" name="submit" id="submit" value=" 发 布 博 文 " /></td>

</tr>

</table>

</form>

</div>

</body>

</html>
 
具体的PHP文件我没有实现，请大家参照以前的博文！