使用php完成常見(jiàn)的文件上傳功能(推薦)
文件上傳現(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的就可以上傳,否則就是上傳失敗)
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 style="font-family: 宋體; font-size: 15px"><span style="font-size: 18px">注意:</span><br>1.可能上傳的時(shí)候是UTF-8的編碼格式,Windows是用的國(guó)標(biāo)的編碼格式,上傳上漢子可能成為亂碼了,可以在文件保存位置下面加上“轉(zhuǎn)換編碼格式”<br>使用的是:</span><span style="font-size: 15px">iconv()方法:</span><span style="font-size: 15px">里面有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 style="font-family: 宋體; font-size: 15px">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ǔ)上完整的上傳圖片代碼
看下選中圖片的效果
這樣,文件上傳和圖片預(yù)覽就結(jié)束了,這兩個(gè)結(jié)合一下就可以做出圖片的上傳了,過(guò)后我會(huì)繼續(xù)補(bǔ)充完整的~~~
相關(guān)文章
php的array數(shù)組和使用實(shí)例簡(jiǎn)明教程(容易理解)
最近在教一個(gè)朋友php,他沒(méi)有其他語(yǔ)言的基礎(chǔ)。對(duì)array的理解和用法有些模糊。所以寫(xiě)了個(gè)教程,需要的朋友可以參考下2014-03-03PHP array_key_exists檢查鍵名或索引是否存在于數(shù)組中的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇PHP array_key_exists檢查鍵名或索引是否存在于數(shù)組中的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06CodeIgniter讀寫(xiě)分離實(shí)現(xiàn)方法詳解
這篇文章主要介紹了CodeIgniter讀寫(xiě)分離實(shí)現(xiàn)方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了CodeIgniter讀寫(xiě)分離的相關(guān)配置與功能實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-01-01PHP笛卡爾積實(shí)現(xiàn)原理及代碼實(shí)例
這篇文章主要介紹了PHP笛卡爾積實(shí)現(xiàn)原理及代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-12-12php 數(shù)據(jù)結(jié)構(gòu)之鏈表隊(duì)列
這篇文章主要介紹了php 數(shù)據(jù)結(jié)構(gòu)之鏈表隊(duì)列的相關(guān)資料,希望通過(guò)本文能幫助到大家,需要的朋友可以參考下2017-10-10PHP中把數(shù)據(jù)庫(kù)查詢結(jié)果輸出為json格式簡(jiǎn)單實(shí)例
這篇文章主要介紹了PHP中把數(shù)據(jù)庫(kù)查詢結(jié)果輸出為json格式簡(jiǎn)單實(shí)例,本文直接給出示例代碼,都是非?;A(chǔ)的寫(xiě)法,大家應(yīng)該一看就明白,需要的朋友可以參考下2015-04-04阿里云Win2016安裝Apache和PHP環(huán)境圖文教程
本文給大家講述的是在阿里云的WindowsServer2016上部署Apache和PHP的web環(huán)境,步驟非常細(xì)致,強(qiáng)烈推薦給大家2018-03-03