文件上傳之前端和后端


明天又是星期一。發現周末的時間過得真快啊。光陰似子彈,嗖的一下,兩天就沒了。

文件上傳是web開發中很常見的場景,比如填寫個人信息的時候傳一兩張自己美美噠照片,比如上傳一張個性的頭像。有時候需要上傳一個壓縮包,文檔啥的。作為程序員嘛,自然免不了要想辦法讓這些美照啊,文件啊順利的到達服務器。

今天我來寫一段最簡單的文件上傳。至於簡單到什么程度,那我先介紹一下稍微復雜的文件上傳吧。

1.web2.0時代,用戶體驗是web開發必須考慮的問題,文件上傳自然不能跳轉,所以,類Ajax的方式上傳文件是現代網站的標配,也就是無刷新上傳文件。

2.每個網站都必須考慮安全。所以,需要驗證上傳文件的人的身份,需要驗證所上傳文件的大小,類型,次數,錯誤處理,這些都是必不可少的。

3.文件到達服務器后,需要將文件做處理,要么通過文件系統保存在服務器磁盤中,要么將文件內容保存在數據庫中。

上面所列舉的一二三,每一項都可以做到很復雜。今天我寫的,上面列舉的內容都沒有,簡單到,沒有安全驗證,沒有類Ajax,沒有做文件處理。也就是文件從前端到后端。


 

文件上傳需要前后端配合。先看代碼:

前端主要代碼(file.html):

1 <form action="file.php" method="post" enctype="multipart/form-data" target="file_upload">
2     選擇文件:
3     <input type="file" name="a_file"><br />
4     <input type="submit" value="提交" name="send_file">
5 </form>

后端主要代碼(file.php):

1 <?php
2     header("Content-type:text/html;charset=utf-8");
3     $file = $_FILES["a_file"];
4     echo $file["name"]."<br />";//文件的名稱
5     echo $file["type"]."<br />";//文件的類型
6     echo $file["error"]."<br />";//文件的錯誤代碼
7     echo $file["size"]."<br />";//文件的大小
8     echo $file["tmp_name"]."<br />";//存儲的服務器的文件的臨時副本的名稱
9 ?>

上面兩個文件就算是最簡單的文件上傳了。

在HTML文件中需要注意以下幾點:

  • form元素的method屬性值,必須是post
  • form元素的enctype屬性值,必須是multipart/form-data(如果在HTML中不設置的話,其值就是默認值,默認值為:application/x-www-form-urlencoded)
  • input元素的type屬性值,必須是file,並且必須設置name值,后端程序就是根據該name值獲取到文件信息的。

后端file.php文件用來接收所上傳的文件的信息。

php是通過一個超全局變量來訪問前端上傳的文件信息的,該超全局變量是:$_FILES,這是一個數組,此數組的鍵值,就是HTML中input元素的name值。

即:$file = $_FILES["a_file"];

通過該超全局變量獲取到的信息也是一個數組,此數組有五個元素,其鍵值分別是:name,type,error,size,tmp_name,對於上傳文件的后續處理,就是通過該數組的這五個元素值進行處理的。

先點擊選擇文件后面的按鈕選擇一個文件,再點擊提交按鈕,在點擊提交按鈕之后,就跳轉到了file.php頁面,即form的action屬性所對應的表單處理程序。

該程序是最簡單的文件上傳,在實際開發過程中,不可能這么簡單。就像上面說的,安全驗證,文件存儲等,都是必須要做的。

 

這是最簡單的文件上傳程序。后面會做更加復雜的文件上傳。

https://github.com/pelligit/FileUpload

github上,php/simplest中是最簡單的。同級文件夾下,將會有另外的文件夾,寫更復雜的文件上傳。歡迎關注。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM