使用php完成常見的檔案上傳功能

檔案上傳現在都是很常見的了，可以上傳檔案，上傳頭像等，不同的瀏覽器“檔案上傳”有不同的效果

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

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

還有很多其他的瀏覽器，就不一一的查看效果了，那麼這個上傳是怎麼實現的呢？

一、檔案上傳功能

（1）第一是要有這個上傳頁面了

首先是要寫表單元素了（其中就有處理頁面“關於上傳的處理了，其中有些規則可以寫”，還有傳輸方式，再就是一個重要的屬性，因為是檔案上傳，所以要有這個屬性：enctype="multipart/form-data"）再就是關於按鈕了，表單決定之後，就是裡面的內容，檔案上傳自然按鈕的類型是“file”；然後就是“上傳”按鈕了，這個要用到提交，所以按鈕類型要用“submit”的，代碼如下：

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

先看下效果：

（2）第二就是重要的檔案上傳的處理頁面了

我們可以先上傳值輸出下，看下檔案上傳之後會出現什麼東西，注意的是：檔案的傳值方式，這裡不能用post或是get了，要用$_FILES[""]這個傳值方式

var_dump($_FILES["file"]);  //輸出傳過來的值

輸出結果

注意：因為下面會用到這張圖中的資訊，在這個我先起個名字（array），便於下面用到時講述不清楚

不難看出數個二維數組：其中有檔案的名稱，類型，儲存位置，錯誤資訊和檔案的大小，這樣其實檔案就會臨時的儲存在伺服器上了

上傳檔案時有4項注意項：

1.控制上傳檔案的類型

2.控制上傳檔案的大小

3.防止檔案名稱重複

　　3.1修改儲存的檔案名稱

　　 3.11使用者名稱+時間戳記+隨機數+檔案名稱

　　3.12流水號

　　3.2使用檔案夾

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

4.儲存檔案

知道了這四項注意項（也相當於步驟），那麼就開始一步一步的寫處理頁面就可以了

（1）在輸出時，可以看到不是有一項是“錯誤”項嘛，首先可以判斷下是否傳輸有誤

if($_FILES["file"]["error"]) //將檔案傳值到處理頁面，找到出錯的索引，也就是（array）圖中的錯誤項error{  echo $_FILES["file"]["error"];}

（2）上面是如果出錯就輸出出錯資訊，沒有錯就是進行下面的內容了：按照注意事項開始寫吧

首先是：控制檔案上傳時的類型和大小（也是從（array）圖中找到類型type和大小size，然後將它們賦想要的類型值就可以了）我們限定了jpeg和png這兩種，也可是多種，用“或”寫上就可以了。這裡也用個if語句判斷下（如果檔案類型是jpeg或是png並且檔案大小是小於1024000的就可以上傳，否則就是上傳失敗）

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

（3）在代碼中的注釋（注意事項3和4的內容）處開始寫檔案的避免重複和儲存

第一：找到檔案的儲存位置（想要儲存在哪個位置），然後拼接上修改檔案名稱的方式（使用時間戳方式）

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

第二：判斷檔案是否存在（存在就提示，不存在就儲存到檔案夾中）

if(file_exists($filesname)) //file_exists()方法：判斷檔案是否存在，裡面的值就是定義的儲存位置{　　echo "檔案已經存在"; //存在給出提示}else{　　//不存在就，儲存檔案（move_uploaded_file()儲存）　　move_uploaded_file($_FILES["file"]["tmp_name"],$filesname);  //裡面的值要有當前的儲存位置，將要儲存到哪的位置}<span style="font-family: 宋體; font-size: 15px"><span style="font-size: 18px">注意：</span><br>1.可能上傳的時候是UTF-8的編碼格式，Windows是用的國標的編碼格式，上傳上漢子可能成為亂碼了，可以在檔案儲存位置下面加上“轉換編碼格式”<br>使用的是：</span><span style="font-size: 15px">iconv()方法：</span><span style="font-size: 15px">裡面有3個值，一是現在使用的編碼格式，二是想要轉換的編碼格式，三是想要轉換的字串</span>$filename = iconv("UTF-8","gb2312",$filesname); //這個iconv()裡面有3個值，一是現在使用的編碼格式，二是想要轉換的編碼格式，三是想要轉化的字串<span style="font-family: 宋體; font-size: 15px">2.如果上面的檔案的上傳格式是篡改的格式，也用move_uploaded_file()方法</span>

到此這個檔案上傳就結束了，可以試一下。

二，上傳檔案預覽

上傳圖片時，都會先看效果怎麼樣，然後再上傳的，接下來就是圖片預覽功能了

（1）可以先有個檔案按鈕，用於選擇檔案

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

（2）用於顯示的這個圖片的一個div

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

給這個div加點樣式

#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>}

看下效果：

然後就是寫事件了

$("#uploadImage").on("change", function(){  // 得到一個參考檔案清單  var files = !!this.files ? this.files : [];  // 如果沒有選擇任何檔案,或者沒有檔案讀到就返回  if (!files.length || !window.FileReader) return;  // 只有進行選擇的檔案是一個形象  if (/^image/.test( files[0].type)){    // 建立一個新的FileReader的執行個體    var reader = new FileReader();    // 讀取本地檔案作為一個DataURL    reader.readAsDataURL(files[0]);    // 當載入時,映像資料設定為背景的div    reader.onloadend = function(){    $("#uploadPreview").css("background-image", "url("+this.result+")");    }  }});

這隻是一個簡單的上傳預覽，上傳到檔案中的處理頁面還沒有寫，改天補上完整的上傳圖片代碼

看下選中圖片的效果

這樣，檔案上傳和圖片預覽就結束了，這兩個結合一下就可以做出圖片的上傳了，過後我會繼續補充完整的~~~