PHP(14) 文件上傳(含動態文件)

時間 2020-07-19

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

原文原文鏈接

PHP(14) 文件上傳(含動態文件)

在不少的PHP項目中常常涉及到文件上傳，那麼今天咱們就來看一看在PHP中如何實現文件上傳！

1、表單

咱們先來研究一下表單。若是想實現文件上傳，那麼在表單內必須存在瀏覽框(File Field)，並且表單的兩個屬性必須注意：

表單的提交方式只能爲POST；

必須設置表單的編碼方式(enctype=」multipart/form-data」)。

源代碼以下：
<form name=」uploadForm」 id=」uploadForm」 action=」upload.php」 method=」POST」 enctype=」multipart/form-data」>

…

</form>

2、$_FILES

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

客戶端機器文件的原名稱

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

文件的 MIME 類型。

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

已上傳文件的大小，單位爲字節。

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

文件被上傳後在服務端儲存的臨時文件名。

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

和該文件上傳相關的錯誤代碼

3、案例

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>

<title>Untitled Document</title>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

<tr>

</tr>

</table>

</form>

</div>

</body>

</html>

效果如圖一所示：

uploadFile.php的代碼以下：

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

<head>

<title>Untitled Document</title>

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

<title>Untitled Document</title>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</tr>

</table>

</form>

</div>

</body>

</html>

效果如圖二所示

uploadFile.php

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

<head>

<title>Untitled Document</title>

</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編輯器來實現

相關標籤/搜索

每日一句

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