HTML文件輸入如何工作？

我只是想知道，當你點擊一個html文件元素時，它顯示了本地系統文件夾。

我們可以使用按鈕和輸入等任何其他html元素嗎？如果不是，文件有什麼特別之處？它如何顯示系統目錄？

2013-08-02 zod

它做的瀏覽器，而不是與HTML。你用純HTML（和Javascript）所做的任何事情都不會讓你直接訪問客戶端的文件系統。你需要一些第三方軟件如Flash或ActiveX來做到這一點。從服務器的角度來看，當你上傳一個文件時，你只是發出一個包含八位字節流的HTTP請求。 – Renan

謝謝。但問題依然存在。如果它是與瀏覽器，而不是與HTML爲什麼只有文件可以執行該？ – zod

@zod瀏覽器自動將自己的樣式應用於頁面上的HTML元素的相同原因 - 瀏覽器如何使用'file'的類型屬性進行呈現和輸入。 IE：除非您使用密碼字段，否則無法將文本顯示爲•••••（或javascript並替換字符，但這不是一回事。） – Jacques

可以讓你訪問文件系統的唯一html元素是input（文件類型），因爲瀏覽器允許它顯示一個打開的對話框，只有瀏覽器可以做到這一點，任何腳本API都沒有辦法訪問系統目錄。出於安全原因，目前沒有其他方法可以通過這種方式訪問文件系統（通過對話框）;通過HTML5在本地保存數據，強制下載保存對話框或打印對話框都是瀏覽器控制的操作，但您可以從網頁調用它們。

來源

2013-08-02 18:01:41 user2513484

通知：我不會準確描述瀏覽器如何處理文件輸入，但我會逐步列出我所做的工作及其結果，以更好地理解輸入;雖然它可能無助於理解其內部機制，但它可以幫助您在使用它時不會感到害怕或困惑。在我的實驗中，我將使用HTML，Apache + PHP和CakePHP，Firefox和Chrome來比較它在現實世界編程中的使用方式。讓我們開始:)

當選擇上傳文件時是否將內容輸入到內存？
- 不，它只是保存文件路徑。我使用進程監視器，然後選擇近200Mb的文件，Chrome和Firefox都不吃更多的內存，或者讀取磁盤;點擊提交按鈕之前，我甚至可以刪除此文件。
如何將輸入的表單效果的enctype？
- application/x-www-form-urlencoded and text/plain似乎IGNORE文件輸入;只有multipart/form-data纔會觸發瀏覽器從文件路徑讀取文件併發送。（查看更多enctype的工作方式請參考：What does enctype='multipart/form-data' mean?）
服務器端在接收數據時會做什麼？
- 正如上面所說的，我只關心PHP，什麼PHP給我們的是：

// Upload 1 file Array (
    [<input name in file input tag>] => Array 
     (
      [name] => <same as the name of selected to upload file> 
      [type] => <type> 
      [tmp_name] => <path of file in tmp folder will explain below> 
      [error] => <0: error, maybe because of file size too large, 1: success> 
      [size] => <size of file in bytes> 
     )  
) 
// Upload multiple files (input name must be <someName>[]) 
Array 
(
    [<input name in file input tag>] => Array 
     (
      [name] => [<array of name>] 
      [type] => [<array of type>] 
      [tmp_name] => [<array of tmp path>] 
      [error] => [<array of error>] 
      [size] => [<array of size>] 
     ) 

)

瀏覽器發送請求（包含文件）到Apache; Apache將請求轉發給PHP; PHP從請求中提取文件並保存到tmp文件夾中的文件，我們可以在[tmp_name]中看到該文件。在PHP文件的末尾，它刪除臨時文件，因此如果需要保存文件，我們必須在腳本結束之前使用move_uploaded_file。

CakePHP如何處理上傳的文件？
- 這是一樣什麼PHP也只是把它放在$這個 - >要求，我們必須確保他們的名字必須是數據[]或只是簡單地使用$這 - >形式 - >形式（「」）
我可以在提交給服務器之前預覽圖像或對所選文件執行某些操作嗎？
- 是的。您可以收聽onchange文件輸入事件;通過它DOM，我們可以訪問FileList，然後從它可以訪問File;隨着的FileReader（幾乎在當前瀏覽器的支持），我們可以把它讀作數據網址...（可以看到這裏的細節：how to preview a image before and after upload?）

來源

2015-10-27 15:41:25 o0omycomputero0o

HTML文件輸入如何工作？

回答

相關問題