PHP(14) 文件上传(含动态文件)

yangcctv

PHP(14) 文件上传(含动态文件)

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

一、表单

我们先来研究一下表单。如果想实现文件上传，那么在表单内必须存在浏览框(File Field)，而且表单的两个属性必须注意：

表单的提交方式只能为POST；

必须设置表单的编码方式(enctype=”multipart/form-data”)。

源代码如下：


…

…



二、$_FILES

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

客户端机器文件的原名称

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

文件的 MIME 类型。

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

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

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

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

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

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

三、案例

1.单个文件上传（具体代码在附件1）

addBlog.php的代码如下：









Untitled Document









发表文章







文章标题:

xxx





文章正文:

xxx





文章附件:











 















效果如图一所示：



uploadFile.php的代码如下：









Untitled Document













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

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

addBlog.php









Untitled Document









发表文章







文章标题:

xxx





文章正文:

xxx





文章附件:











 











 











 











 











 















效果如图二所示



uploadFile.php









Untitled Document













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编辑器来实现



附件：http://down.运维网.com/data/2354648