如何使用javascript，jquery-ajax獲取<input type ='file'>更改所選文件的完整路徑？

Question

如何獲得文件的完整路徑，而使用<input type=‘file’>

<input type="file" id="fileUpload"> 
<script type="text/javascript"> 
function getFilePath(){ 
    $('input[type=file]').change(function() { 
     var filePath=$('#fileUpload').val(); 
    }); 
} 
</script> 

選擇的文件，但文件路徑VAR包含所選文件的only name，而不是full path。
我在網上搜索它，但似乎出於安全原因，瀏覽器（FF，鉻）只是給文件的名稱。
是否有任何其他方式獲取選定文件的完整路徑？

Answer 1

出於安全原因，瀏覽器不會允許這樣做，即JavaScript的瀏覽器具有對文件系統不能訪問，但使用HTML5文件API，只有火狐提供了一個mozFullPath屬性，但如果你試圖獲得價值它返回一個空字符串：

$('input[type=file]').change(function() { 
    console.log(this.files[0].mozFullPath); 
}); 

http://jsfiddle.net/SCK5A/

所以，不要浪費你的時間。

編輯：如果您需要文件的路徑來讀取文件，則可以使用FileReader API。這裏是關於SO的一個相關問題：Preview an image before it is uploaded.

Answer 2

你不能這樣做 - 瀏覽器不會允許這是因爲安全問題。

當一個文件是通過使用輸入類型=文件對象，該值屬性的值 選擇取決於的值的安全設置 「上傳文件到服務器時包含本地 目錄路徑」該安全區域用於顯示包含輸入 對象的網頁。

啓用此設置後，所選文件的全限定文件名僅返回 。當設置被禁用時，Internet Explorer 8用字符串 C：\ fakepath \替換本地驅動器和目錄路徑，以防止不適當的信息泄露。

與其他

你錯過了這個);在變化事件功能的結束。

還沒有爲更改事件函數，而不是隻把它當作下面，

<script type="text/javascript"> 

    $(function() 
    { 
     $('#fileUpload').on('change',function() 
     { 
      var filePath = $(this).val(); 
      console.log(filePath); 
     }); 
    }); 

</script> 

Answer 3

你永遠不應該這樣做....，我想在最新的瀏覽器嘗試它是無用的（據我所知）..另一方面，所有最新的瀏覽器，將不會允許這....

一些其他的環節，你可以通過，找到一種解決方法，如獲取價值serverside，但不在客戶端（javascript）

Full path from file input using jQuery
How to get the file path from HTML input form in Firefox 3

Answer 4

你不行。 安全性會阻止您瞭解有關客戶端計算機文件系統的任何信息 - 甚至可能沒有！它可能是一臺MAC，一臺PC，一臺平板電腦或一臺可上網的冰箱 - 你不知道，不知道，也不會知道。讓你有完整的路徑可以給你一些關於客戶端的信息 - 特別是如果它是一個網絡驅動器。

事實上，你可以在特定的條件下獲得它，但它需要一個ActiveX控件，並且在99.99％的情況下不起作用。

無論如何，您無法使用它將文件恢復到原始位置（因爲您完全無法控制下載的存儲位置，或者即使它們已存儲），所以在實踐中它不是很有用無論如何。

Answer 5

試試這個：

它會給你一個臨時路徑不準確的路徑，你可以，如果你想顯示所選圖像在此的jsfiddle例子（由selectng圖像以及試試使用這個腳本其他文件）： -

JSFIDDLE

下面是代碼： -

HTML： -

<input type="file" id="i_file" value=""> 
<input type="button" id="i_submit" value="Submit"> 
<br> 
<img src="" width="200" style="display:none;" /> 
<br> 
<div id="disp_tmp_path"></div> 

JS： -

$('#i_file').change(function(event) { 
    var tmppath = URL.createObjectURL(event.target.files[0]); 
    $("img").fadeIn("fast").attr('src',URL.createObjectURL(event.target.files[0])); 

    $("#disp_tmp_path").html("Temporary Path(Copy it and try pasting it in browser address bar) --> <strong>["+tmppath+"]</strong>"); 
}); 

它不正是你要找的，但可能是它可以幫助你的地方。

Answer 6

您的意思是？

$('#i_file').change(function(event) { 
 
var tmppath = URL.createObjectURL(event.target.files[0]); 
 
    $("img").fadeIn("fast").attr('src',tmppath);  
 
});

Answer 7

您可以使用下面的代碼來獲得一個工作本地網址上傳的文件：

<script type="text/javascript">  
    var path = (window.URL || window.webkitURL).createObjectURL(file); 
    console.log('path', path); 
</script> 

Answer 8

可以，如果上傳整個文件夾是一個選擇

<input type="file" webkitdirectory directory multiple/> 

更改事件將包含：

.target.files[...].webkitRelativePath: "FOLDER/FILE.ext" 

Answer 9

文件元素具有與陣列通話files它包含你需要

var file = document.getElementById("upload"); 

file.addEventListener("change", function() { 
    for (var i = 0; i < file.files.length; i++) { 
     console.log(file.files[i].name); 
    } 
}, false);