INPUT[type=file] 的 'value' 屬性值在各瀏覽器中存在差別

時間 2019-11-19

標籤 input type file value 屬性瀏覽器存在差別欄目瀏覽器简体版

原文原文鏈接

標準參考

當一個 INPUT 元素的 'type' 屬性值設置爲 'file' 時建立了一個文件選擇控件(file select)，其中 INPUT 元素的 'value' 屬性值即是文件的初始名稱。html

另外，在 IE6 和 IE7 下經過此方法實現的文件選擇控件的輸入框是能夠手動輸入的，但若在此路徑下不存在此文件則會顯示錯誤信息，而在 IE8 和其餘瀏覽器中是禁止手動輸入的。瀏覽器

關於 INPUT[type=file] 的詳細信息，請參考 HTML4.0 規範 17.4.1 Control types created with INPUT 中的內容。安全

問題描述

在經過設置 INPUT 元素的 'type' 屬性值爲 'file' 來實現一個文件選擇控件時，按照規範的描述此 INPUT 的 'value' 屬性值應爲被選擇的文件名稱，而不該該包含文件路徑或其餘字符，然而在各瀏覽器中 INPUT 元素的 'value' 屬性值不盡相同，在 IE 和 Opera 中與規範的描述不符。服務器

形成的影響

因爲 'INPUT[type=file]' 的 'value' 屬性值在各瀏覽器中存在差別，這使得例如要實現一個在客戶端上傳圖片時當用戶選擇圖片後要在特定位置重現該圖片以便用戶確認此圖片的過程當中若是用 JavaScript 腳本去得到 INPUT 元素的 'value' 屬性值並將其賦給一個 'img' 元素的 'src' 屬性時在除 IE 之外的瀏覽器中沒法達到預期效果。app

受影響的瀏覽器

全部瀏覽器

問題分析

測試代碼以下：測試

<body>
<span>請上傳圖片：</span>
<input type="file" id="upload">
<input type="button" value="See" id="see" onclick="getseee()">
<div id="path" style="display:none" >
  <p>'input[type=file]' 的 'value' 屬性值爲：</p>
  <div id="info"></div>
</div>
<hr>
<div id="image" style="display:none" >
  <p>您選擇的圖片爲：</p>
  <img   alt="沒法顯示該圖片" id="pic" style="height:100px; width:120px;"/>
</div>
</body>

<script>
  function getseee() {
    document.getElementById("pic").src = document.getElementById("upload").value;
    document.getElementById("info").innerHTML= document.getElementById("upload").value;
    document.getElementById("path").style.display="";
    document.getElementById("image").style.display="";
    }
</script>

以上代碼的目的是經過 JavaScript 腳本實現獲取被上傳圖片的路徑並將其在客戶端顯示，但只有在 IE 中達到了預期效果。ui

在各瀏覽器中的截圖以下：spa

IE6 IE7 IE8

Opera¹

FireFox

Chrome

Safari

【注】：IE9 Beta 版在默認安全設置下與 Opera 瀏覽器處理一致。操作系統

從截圖能夠看出運行結果可分爲三類：code

IE 中能夠經過 JavaScript 腳本得到所上傳圖片的完整路徑並能夠根據這個路徑將圖片顯示在客戶端；
Opera Chrome 中經過 JavaScript 腳本所得到的爲所上傳圖片的僞路徑 ( fakepath ) ，所以不能根據這個路徑顯示本地圖本片；
FireFox Safari 中得到的爲圖片的名稱，所以也不能根據這個獨立圖片名顯示本地圖本片。

綜上所述，這個問題的根本成由於——各個瀏覽器對用戶選擇的本地文件信任程度不一樣，只有 IE6 IE7 IE8 瀏覽器在默認安全設置下信任用戶選擇的本地文件。

解決方案

若是要實現相似上例中的客戶端圖片瀏覽功能建議讀者查找 actionScript 3 相關資料來完成或先將圖片存儲到服務器端再顯示到客戶端。

參見

知識庫

測試環境

操做系統版本:	Windows 7 Ultimate build 7600
瀏覽器版本:	IE6 IE7 IE8 Firefox 3.6.10 Chrome 7.0.517.8 dev Safari 5.0.2 Opera 10.62
測試頁面:	input_file.html
本文更新時間:	2010-09-06