PHP(14) 文件上传(含动态文件)
 
在很多的PHP项目中经常涉及到文件上传，那么今天我们就来看一看在PHP中如何实现文件上传！

一、表单

我们先来研究一下表单。如果想实现文件上传，那么在表单内必须存在浏览框(File Field)，而且表单的两个属性必须注意：
 
表单的提交方式只能为POST；
 
必须设置表单的编码方式(enctype=”multipart/form-data”)。
 
源代码如下：
<form name=”uploadForm” id=”uploadForm” action=”upload.php” method=”POST” enctype=”multipart/form-data”>

…

…

</form>

二、$_FILES

$_FILES['userfile']['name']

客户端机器文件的原名称

$_FILES['userfile']['type']

文件的 MIME 类型。

$_FILES['userfile']['size']

已上传文件的大小，单位为字节。

$_FILES['userfile']['tmp_name']

文件被上传后在服务端储存的临时文件名。

$_FILES['userfile']['error']

和该文件上传相关的错误代码

三、案例
 
1.单个文件上传（具体代码在附件1）
 
addBlog.php的代码如下：

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

<head>

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

<title>Untitled Document</title>

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

</head>

<body>

<div id="container">

<h1 id="subject">发表文章</h1>

<form action="uploadFile.php" method="post" enctype="multipart/form-data" name="uploadForm" id="uploadForm">

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

<tr>

<td class="borderBottom rowNum">文章标题:</td>

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

</tr>

<tr>

<td class="borderBottom rowNum">文章正文:</td>

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

</tr>

<tr>

<td class="borderBottom rowNum">文章附件:</td>

<td class="borderBottom">
 
<input name="uploadFile" type="file" id="uploadFile" />
 
</td>

</tr>

<tr>

<td>&nbsp;</td>

<td><input type="p_w_picpath" name="p_w_picpathField" src="p_w_picpaths/submit.gif" /></td>

</tr>

</table>

</form>

</div>

</body>

</html>

效果如图一所示：
 
PHP(14) 文件上传(含动态文件)_休闲
 
uploadFile.php的代码如下：

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

<head>

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

<title>Untitled Document</title>

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

</head>

<body>

<?php

$fileName = $_FILES["uploadFile"]["name"];

$tmpName  = $_FILES["uploadFile"]["tmp_name"];

$error    = $_FILES["uploadFile"]["error"];
 
if($error == 0)

{

 move_uploaded_file($tmpName,"./uploadFile/{$fileName}");
}

else

{

 echo("文件上传错误");

}

?>

</body>

</html>

2.多个文件的上传(具体的代码在附件2)

如果要实现多个文件的上传，浏览框的命名必须以数组形式命名，所谓数组形式，就是在原有名称的基础上添加中括号(如uploadFile[])。

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

<head>

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

<title>Untitled Document</title>

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

</head>

<body>

<div id="container">
 
<h1 id="subject">发表文章</h1>

<form action="uploadFile.php" method="post" enctype="multipart/form-data" name="uploadForm" id="uploadForm">

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

<tr>

<td class="borderBottom rowNum">文章标题:</td>

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

</tr>

<tr>

<td class="borderBottom rowNum">文章正文:</td>

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

</tr>

<tr>

<td class="borderBottom rowNum">文章附件:</td>

<td class="borderBottom">
 
<input name="uploadFile[]" type="file" id="uploadFile[]" />
 
</td>

</tr>

<tr>

<td class="borderBottom rowNum">&nbsp;</td>

<td class="borderBottom">
 
<input name="uploadFile[]" type="file" id="uploadFile[]" />
 
</td>

</tr>

<tr>

<td class="borderBottom rowNum">&nbsp;</td>

<td class="borderBottom">
 
<input name="uploadFile[]" type="file" id="uploadFile[]" />
 
</td>

</tr>

<tr>

<td class="borderBottom rowNum">&nbsp;</td>

<td class="borderBottom">
 
<input name="uploadFile[]" type="file" id="uploadFile[]" />
 
</td>

</tr>

<tr>

<td class="borderBottom rowNum">&nbsp;</td>

<td class="borderBottom">
 
<input name="uploadFile[]" type="file" id="uploadFile[]" />
 
</td>

</tr>

<tr>

<td>&nbsp;</td>

<td><input type="p_w_picpath" name="p_w_picpathField" src="p_w_picpaths/submit.gif" /></td>

</tr>

</table>

</form>

</div>

</body>

</html>

效果如图二所示
 
PHP(14) 文件上传(含动态文件)_休闲_02
 
uploadFile.php
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

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

<title>Untitled Document</title>

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

</head>

<body>

<?php

$fileNames = $_FILES["uploadFile"]["name"];

$tmpNames  = $_FILES["uploadFile"]["tmp_name"];

$errors    = $_FILES["uploadFile"]["error"];

foreach($errors as $key => $val)

{

 if($val == 0)

 {

  move_uploaded_file($tmpNames[$key],"./uploadFile/{$fileNames[$key]}");

 }

}

?>

</body>

</html>
 
3.多个文件的上传(具体的代码在附件3)

在案例2中，我们虽然实现了多个文件的上传，但是附件的数目最多只能是5个，那么，我们可不可以实现动态数目的附件呢？也就是用户可以随意设置附件的数目。如果要实现这个功能，只能通过JS来实现了。并且在本案例中，我们还通过JS来检测文件的类型是否合法！为上传文件更名的部分大家自己实现吧！^_^

JS代码如下：
 

 
function $(objId)
 
{
 
    return document.getElementById(objId);
 
}
 
function getFileName(filePath)
{
    var fileName = "";
    if(filePath.indexOf("\\") == -1)
   
    {
 
    fileName = filePath;
 
    }
  
    else
 
    {
 
    fileName = filePath.substr(filePath.lastIndexOf("\\")+1);
    }
 
    return fileName;
}
 
function getExtName(fileName)
 
{
 
    var extName = "";
 
    extName = fileName.substr(fileName.lastIndexOf(".")+1).toLowerCase();
 
    return extName;
 
}
 
function validFileType(fileName)
 
{
 
    var extName = getExtName(fileName);
 
    if(allowFileType.indexOf(extName) == -1)
 
    {
 
    return false;
 
    }
 
    else
   
    {
 
    return true;
 
    }
 
}
function addAttach()
 
{
 
    var attachObj = $("attach");
 
    var attachListObj = $("attachList");
 
    var newAttObj = attachObj.cloneNode(true);
 
    var rowId  =  "row_" + i;
 
    newAttObj.id = rowId;
 
    newAttObj.style.display = "";
 
    attachListObj.appendChild(newAttObj); 
 
    var fileObj = newAttObj.getElementsByTagName("input")[0];
 
    var spanObj = newAttObj.getElementsByTagName("span")[0];
 
    var linkObj = newAttObj.getElementsByTagName("a")[0];
 
    linkObj.style.display = "none";
 
    fileObj.onchange = function()
 
    {
 
       var fileObjVal = fileObj.value;
 
       var fileName = getFileName(fileObjVal);
 
        if(validFileType(fileName))
 
       {
 
           spanObj.innerHTML =  fileName;
 
           fileObj.style.display = "none";
 
           linkObj.style.display = "";
 
           addAttach();
 
       }
 
       else
 
       {
           removeAttach(rowId);
 
           addAttach();
 
           showInfo(unValidFileType);
 
       }
 
    }
 
    linkObj.onclick  = function()
 
    {
 
        removeAttach(rowId);
 
    }
 
    i++;
 
}
 
function removeAttach(rowId)
 
{
 
       var attachListObj = $("attachList");
 
        attachListObj.removeChild($(rowId));  
 
}
 
function showInfo(pro)
 
{
 
    window.alert(pro);
 
}
 
var unValidFileType = "文件类型错误";

 
关于"文章正文"部分，在以后的博文中我们会采用FCKEditor编辑器来实现