由于涉及到本地和服務器兩方面的安全問題,所以基于input type="file"形式的頁面文件上傳一直處于一個很尷尬的位置。一方面,用戶不希望隱私泄露,所以瀏覽器無法對用戶在上傳時選擇的文件做有效的判 斷。另一方面,為了服務器端的安全,減輕傳輸負擔,系統又希望能在用戶開始上傳之前就將非法的文件拒之門外。一來一去,基于原始input方式的上傳,成為網絡存儲網站避之唯恐不及的遺留性問題,也造就了現在千奇百怪的插件、上傳客戶端。input方式的上傳就如此之差么?沈陽網站制作告訴你當然不是。上傳文件不大的時候,它還是非常簡單可靠的,在PHP中,我們只需要一個復合型表單:
<form enctype="multipart/form-data" action="__URL__" method="POST">
一個輸入框:
<input name="userfile" type="file" />
和服務器端的一行代碼:
move_uploaded_file($_FILES['userfile']['tmp_name'], '/var/www/uploads/'. basename($_FILES['userfile']['name']));
就可以實現整個上傳過程。
但隨文件增大,表單上傳的不足就會暴露出來。尤其是我們想取得最基本的文件大小來阻止過大文件上傳這一簡單的想法,也變得如此困難。以下一一道來:
通過MAX_FILE_SIZE
MAX_FILE_SIZE 隱藏字段(單位為字節)必須放在文件輸入字段之前,其值為接收文件的最大尺寸。這是對瀏覽器的一個建議,PHP 也會檢查此項。在瀏覽器端可以簡單繞過此設置,因此不要指望用此特性來阻擋大文件。實際上,PHP 設置中的上傳文件最大值是不會失效的。但是最好還是在表單中加上此項目,因為它可以避免用戶在花時間等待上傳大文件之后才發現文件過大上傳失敗的麻煩。
顯然PHP的開發者們也考慮到了大文件上傳的問題,但就像手冊所說,MAX_FILE_SIZE只是對瀏覽器的一個建議,事實上目前為止所有主流的瀏覽器并沒有采納這個建議,所以采用MAX_FILE_SIZE約束文件大小形同擺設,不可行。
通過服務器端
MAX_FILE_SIZE既然無效,那么用戶可以將文件上傳到服務器,服務器端通過$_FILES['userfile']['size']判斷用戶上 傳的文件大小,然后決定是否接受上傳并返回信息。暫且排除服務器的負荷以及可能存在的惡意破壞行為,這種解決方案聽起來無非是浪費一部分帶寬,也能對用戶 上傳文件作出約束。
但這也是不可行的,PHP的文件上傳受到php.ini以下這些設置的影響:
post_max_size
upload_max_filesize
max_execution_time
memory_limit
雖然設置方法在手冊 中都有比較詳細的說明,之所以仍然說此方法不可行,是因為php執行腳本在超過memory_limit時,該次的POST數據會全部丟失并且不會報錯!
試想用戶填寫了一個超長的表單,并伴隨一個超過memory_limit的文件一起上傳,經過了漫長的等待時間之后發現等來的又是一張干干凈凈的空白表 單,那是何等印象深刻的用戶體驗啊。更何況數十M的服務器流量僅僅用來檢測文件大小,是現在的網絡環境不允許的。
通過Javascript
Javascript是基于瀏覽器的,雖然JS能完成很多看似不可能的任務,但瀏覽器做不到的事情JS同樣無法做到。先天不足注定了這項工作僅僅靠Javascript是無法勝任的。不過一些IE Only的方法 也還是存在的,僅作參考 。
通過Flash
Flash的FileReference類提供了一套比較全面的文件處理方法,現在大多數大文件上傳也都采用了基于Flash的方案。如果利用Flash與Js交互,能否實現客戶端對文件大小的檢測呢?答案是可行的。
首先在flash文件中實例化FileReference類。
var fr = new FileReference();
基于這個類就可以用Flash提供的file browse和SelectFile事件替代瀏覽器的事件。我們需要:
1、綁定SelectFile
fr.addEventListener(Event.SELECT, onSelectFile);
2、創建一個供Js訪問的對象,用來放置flash得到的文件信息
var s = {
size:0,
name:'',
type:''
}
3、創建file browse方法
function browseFile():void {<br>
fr.browse();<br>
}
4、當SelectFile事件觸發的時候,傳遞文件信息
function onSelectFile(e:Event):void {<br>
s.size = fr.size;<br>
s.name = fr.name;<br>
s.type = fr.type;<br>
}
5、將browseFile方法公開可供Js調用
ExternalInterface.addCallback("browseFile", browseFile);
6、將得到的文件信息傳遞給Js
ExternalInterface.call("onSelectFile",s);
現在我們已經可以通過Js獲得由flash傳遞來的文件大小信息了,具體的實現可以參看Demo 。