我可以使用任何HTML或JavaScript API在輸入[type = file]中獲取文件的路徑嗎？

Question

我想實現上傳圖像功能。

上傳後，我想獲得文件本地路徑，以便我可以創建一個縮略圖。但是我怎樣才能獲得文件路徑？是否有另一種方式來創建縮略圖？

我曾嘗試jQuery的文件上傳插件。

Answer 1

我覺得Chrome支持這一點，但不知道它是否是由於安全reasons.Anyways你可以嘗試的javascrip播放設置自定義寬度和高度一些股利，並使用上傳文件的readAsDataURL刪除

<script type="text/javascript">  

function uploadFile(input) {   

if (input.files && input.files[0]) {    

var reader = new FileReader();    
reader.onload = function (e) {     
$('#test').attr('src', e.target.result).width(100).height(100);    
};    
reader.readAsDataURL(input.files[0]);   
}  
} 

</script> 

<input type='file' onchange="uploadFile(this);" />  <img id="test" src="#" alt="my image" /> 

Answer 2

出於安全原因，沒有辦法獲得的文件路徑。您只能通過從值：input.value.split("/")[1]中刪除fakepath來獲取文件名。

要創建一個縮略圖，使用已經上傳的文件，而不是本地的。

Answer 3

jQuery File Upload Demo Page演示了獲取要上傳的文件名的概念。在添加文件時，文件名將顯示在控件下方的表格視圖中。

這個插件有幾個選項，包括特定事件發生後觸發的回調。

下面是演示如何獲取文件名的例子：

function (e, data) { 
    $.each(data.files, function (index, file) { 
     alert('Added file: ' + file.name); // filename alerted 
    }); 
    data.url = '/path/to/upload/handler.json'; 
    var jqXHR = data.submit() 
     .success(function (result, textStatus, jqXHR) {/* ... */}) 
     .error(function (jqXHR, textStatus, errorThrown) {/* ... */}) 
     .complete(function (result, textStatus, jqXHR) {/* ... */}); 
} 

根據文檔，你就會有成功的機會最大，如果您綁定使用jQuery的.bind關鍵字的回調函數：

$('#fileupload') 
    .bind('fileuploadadd', function(e, data) { ... }); 

從文檔上的 「添加」：

數據參數允許覆蓋插件選項以及定義ajax設置。 data.files適用於上載請求文件的列表：如果singleFileUploads選項啓用（這是默認值），附加回調將一次評選爲XHR文件上傳的每個文件調用，一個data.files數組長度爲1，因爲每個文件都是單獨上傳的。否則添加回調將被調用一次，每個文件選擇。

以下是jQuery File Upload Options的完整列表。

此外，只有一些瀏覽器支持圖片預覽，這是你的訪問文件名的目標：在上傳文件之前

圖片預覽

以下瀏覽器對圖片預覽支持：

• Firefox 3。6+
• 谷歌瀏覽器
• 歌劇11+

的Browser Support頁對插件的到底是什麼功能是在不同的瀏覽器不支持更多的細節。