如何使用php實(shí)現(xiàn)文件上傳功能

這篇文章將為大家詳細(xì)講解有關(guān)如何使用php實(shí)現(xiàn)文件上傳功能，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

文件上傳現(xiàn)在都是很常見(jiàn)的了，可以上傳文件，上傳頭像等，不同的瀏覽器“文件上傳”有不同的效果

先看下火狐瀏覽器的效果是這樣的：

再看下IE瀏覽器是這樣的：

還有很多其他的瀏覽器，就不一一的查看效果了，那么這個(gè)上傳是怎么實(shí)現(xiàn)的呢？

一、文件上傳功能

（1）第一是要有這個(gè)上傳頁(yè)面了

首先是要寫(xiě)表單元素了（其中就有處理頁(yè)面“關(guān)于上傳的處理了，其中有些規(guī)則可以寫(xiě)”，還有傳輸方式，再就是一個(gè)重要的屬性，因?yàn)槭俏募蟼?，所以要有這個(gè)屬性：enctype="multipart/form-data"）再就是關(guān)于按鈕了，表單決定之后，就是里面的內(nèi)容，文件上傳自然按鈕的類型是“file”；然后就是“上傳”按鈕了，這個(gè)要用到提交，所以按鈕類型要用“submit”的，代碼如下：

<form action="wenjiansccl.php" method="post" enctype="multipart/form-data">  <!--處理頁(yè)面起個(gè)名字，做文件上傳是這個(gè)屬性：enctype="multipart/form-data"-->
　　<input type="file" name="file"/> //瀏覽文件的按鈕
　　<input type="submit" value="上傳" /> //提交的上傳按鈕
</form>

先看下效果：

（2）第二就是重要的文件上傳的處理頁(yè)面了

我們可以先上傳值輸出下，看下文件上傳之后會(huì)出現(xiàn)什么東西，注意的是：文件的傳值方式，這里不能用post或是get了，要用$_FILES[""]這個(gè)傳值方式

var_dump($_FILES["file"]);  //輸出傳過(guò)來(lái)的值

輸出結(jié)果如圖：

注意：因?yàn)橄旅鏁?huì)用到這張圖中的信息，在這個(gè)我先起個(gè)名字（array），便于下面用到時(shí)講述不清楚

不難看出數(shù)個(gè)二維數(shù)組：其中有文件的名稱，類型，保存位置，錯(cuò)誤信息和文件的大小，這樣其實(shí)文件就會(huì)臨時(shí)的保存在服務(wù)器上了

上傳文件時(shí)有4項(xiàng)注意項(xiàng)：

1.控制上傳文件的類型

2.控制上傳文件的大小

3.防止文件名重復(fù)

　　3.1修改保存的文件名

   　　 3.11用戶名+時(shí)間戳+隨機(jī)數(shù)+文件名

    　　3.12流水號(hào)

　　3.2使用文件夾

  　　  3.21public/lch/2017-2-12/1.jpg

4.保存文件

知道了這四項(xiàng)注意項(xiàng)（也相當(dāng)于步驟），那么就開(kāi)始一步一步的寫(xiě)處理頁(yè)面就可以了

（1）在輸出時(shí)，可以看到不是有一項(xiàng)是“錯(cuò)誤”項(xiàng)嘛，首先可以判斷下是否傳輸有誤

if($_FILES["file"]["error"]) //將文件傳值到處理頁(yè)面，找到出錯(cuò)的索引，也就是（array）圖中的錯(cuò)誤項(xiàng)error
{
  echo $_FILES["file"]["error"];
}

（2）上面是如果出錯(cuò)就輸出出錯(cuò)信息，沒(méi)有錯(cuò)就是進(jìn)行下面的內(nèi)容了：按照注意事項(xiàng)開(kāi)始寫(xiě)吧

首先是：控制文件上傳時(shí)的類型和大?。ㄒ彩菑模╝rray）圖中找到類型type和大小size，然后將它們賦想要的類型值就可以了）我們限定了jpeg和png這兩種，也可是多種，用“或”寫(xiě)上就可以了。這里也用個(gè)if語(yǔ)句判斷下（如果文件類型是jpeg或是png并且文件大小是小于1024000的就可以上傳，否則就是上傳失?。?/p>

if($_FILES["file"]["type"]=="image/jpeg" || $_FILES["file"]["type"]=="image/png" && $_FILES["file"]["size"]<1024000)
{<br>　　//注意事項(xiàng)3和4的內(nèi)容<br>}
else
{
　　echo "文件類型不正確！"; 
}

（3）在代碼中的注釋（注意事項(xiàng)3和4的內(nèi)容）處開(kāi)始寫(xiě)文件的避免重復(fù)和保存

第一：找到文件的保存位置（想要保存在哪個(gè)位置），然后拼接上修改文件名的方式（使用時(shí)間戳方式）

$filesname = "./files/".date("YmdHis").$_FILES["file"]["name"]; //$_FILES["file"]["name"]這也同樣的也是（array）圖的名稱name

第二：判斷文件是否存在（存在就提示，不存在就保存到文件夾中）

if(file_exists($filesname)) //file_exists()方法：判斷文件是否存在，里面的值就是定義的保存位置
{
　　echo "文件已經(jīng)存在"; //存在給出提示
}
else
{
　　//不存在就，保存文件（move_uploaded_file()保存）
　　move_uploaded_file($_FILES["file"]["tmp_name"],$filesname);  //里面的值要有當(dāng)前的保存位置，將要保存到哪的位置
}
<span ><span >注意：</span><br>1.可能上傳的時(shí)候是UTF-8的編碼格式，Windows是用的國(guó)標(biāo)的編碼格式，上傳上漢子可能成為亂碼了，可以在文件保存位置下面加上“轉(zhuǎn)換編碼格式”<br>使用的是：</span><span >iconv()方法：</span><span >里面有3個(gè)值，一是現(xiàn)在使用的編碼格式，二是想要轉(zhuǎn)換的編碼格式，三是想要轉(zhuǎn)換的字符串</span>
$filename = iconv("UTF-8","gb2312",$filesname); //這個(gè)iconv()里面有3個(gè)值，一是現(xiàn)在使用的編碼格式，二是想要轉(zhuǎn)換的編碼格式，三是想要轉(zhuǎn)化的字符串
<span >2.如果上面的文件的上傳格式是篡改的格式，也用move_uploaded_file()方法</span>

到此這個(gè)文件上傳就結(jié)束了，可以試一下。

二，上傳文件預(yù)覽

上傳圖片時(shí)，都會(huì)先看效果怎么樣，然后再上傳的，接下來(lái)就是圖片預(yù)覽功能了

（1）可以先有個(gè)文件按鈕，用于選擇文件

<input id="uploadImage" type="file" name="photoimage" class="fimg1" onchange="PreviewImage();" /> //對(duì)這個(gè)按鈕加一個(gè)事件

（2）用于顯示的這個(gè)圖片的一個(gè)div

<div id="uploadPreview"></div>

給這個(gè)div加點(diǎn)樣式

#uploadPreview {
  width: 168px;
  height: 168px;             
  background-position: center center;
  background-size: cover;
  border: 4px solid #fff;
  -webkit-box-shadow: 0 0 0px 0px rgba(0, 0, 0, 0);
  display: inline-block;<br>}

看下效果：

然后就是寫(xiě)事件了

$("#uploadImage").on("change", function(){
  // 得到一個(gè)參考文件列表
  var files = !!this.files ? this.files : [];
  // 如果沒(méi)有選擇任何文件,或者沒(méi)有文件讀到就返回
  if (!files.length || !window.FileReader) return;
  // 只有進(jìn)行選擇的文件是一個(gè)形象
  if (/^image/.test( files[0].type)){
    // 創(chuàng)建一個(gè)新的FileReader的實(shí)例
    var reader = new FileReader();
    // 讀取本地文件作為一個(gè)DataURL
    reader.readAsDataURL(files[0]);
    // 當(dāng)加載時(shí),圖像數(shù)據(jù)設(shè)置為背景的div
    reader.onloadend = function(){
    $("#uploadPreview").css("background-image", "url("+this.result+")");
    }
  }
});

這只是一個(gè)簡(jiǎn)單的上傳預(yù)覽，上傳到文件中的處理頁(yè)面還沒(méi)有寫(xiě)，改天補(bǔ)上完整的上傳圖片代碼

看下選中圖片的效果

關(guān)于“如何使用php實(shí)現(xiàn)文件上傳功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。