使用jQuery從輸入[type ='file']獲取文件名

Question

這是上傳的表單。

<form class="alert alert-info"> 
    <div> 
     <b id = "select_file" class="span3" style="font-weight: bold; cursor: pointer; ">Please select image</b> 
     <input class="span3" type="file" name="image_file" id="image_file" style="display:none " /> 
     <input disabled="true" type="button" value="Upload image" class="btn" /> 
    </div> 
</form> 

我使用下面的腳本來打開一個包含文件的窗口。我想在<b id = 'select_file'>中顯示文件名。

我該怎麼做？

$('#select_file').click(function(){ 
    var _this = $(this); 
    $('#image_file').show().focus().click().hide(); 

    var filename = $('#image_file').val(); 
    _this.html(filename); 

    $('.btn').attr('disabled', false); 
}); 

Answer 1

你必須做這個的input type file這種方式改變事件：

$('#select_file').click(function() { 
    $('#image_file').show(); 
    $('.btn').prop('disabled', false); 
    $('#image_file').change(function() { 
     var filename = $('#image_file').val(); 
     $('#select_file').html(filename); 
    }); 
});​ 

Answer 2

由於安全原因，這是不可能的。至少不是現代瀏覽器。這是因爲任何訪問文件路徑的代碼都可能被認爲是危險的，並且存在安全風險。要麼你最終會得到一個未定義的值，將會拋出一個空字符串或一個錯誤。

當提交文件表單時，瀏覽器將文件臨時緩存到上傳目錄中，並且僅提交該文件的該臨時文件名和該文件的基本名稱。

Answer 3

獲取文件名非常簡單。正如Matsko所指出的那樣，出於安全原因，您無法在用戶計算機上獲得完整的文件路徑。

var file = $('#image_file')[0].files[0] 
if (file){ 
    console.log(file.name); 
} 

Answer 4

有這個沒有jQuery的功能。您必須訪問DOM元素並檢查文件屬性。

document.getElementById("image_file").files[0]; 

或者

$('#image_file')[0].files[0] 

Answer 5

這是一個非常重要的問題，我爲了我的網站是多語言的。所以這裏是我在Firefox和Chrome中測試的結論。

jQuery觸發器派上用場。

因此，這隱藏標準無聊type=file標籤。您可以放置​​任何您想要的標籤並將其格式化。我從http://demo.smarttutorials.net/ajax1/定製了一個腳本。該腳本允許通過縮略圖預覽進行多個文件上傳，並使用PHP和MySQL。

<form enctype="multipart/form-data" name='imageform' role="form" ="imageform" method="post" action="upload_ajax.php"> 
    <div class="form-group"> 
     <div id="select_file">Select a file</div> 
     <input class='file' type="file" style="display: none " class="form-control" name="images_up" id="images_up" placeholder="Please choose your image"> 
     <div id="my_file"></div> 
     <span class="help-block"></span> 
    </div> 
    <div id="loader" style="display: none;"> 
     Please wait image uploading to server.... 
    </div> 
    <input type="submit" value="Upload" name="image_upload" id="image_upload" class="btn"/> 
</form> 

$('#select_file').click(function() { 
    $('#images_up').trigger('click'); 
    $('#images_up').change(function() { 
     var filename = $('#images_up').val(); 
     if (filename.substring(3,11) == 'fakepath') { 
      filename = filename.substring(12); 
     } // Remove c:\fake at beginning from localhost chrome 
     $('#my_file').html(filename); 
    }); 
}); 

Answer 6

var file = $('#YOURID > input[type="file"]'); file.value; // filename will be,

在Chrome中，如果沒有選擇文件時，它會像C:\fakepath\FILE_NAME或undefined。

這是一個限制或意圖，瀏覽器不顯示本地計算機的文件結構。

Answer 7

$("#filetosend").prop('files')[0] 

Answer 8

您可以訪問要傳遞參數給你的回調函數的性質（如evt），然後訪問它的文件（evt.target.files[0].name）：

$("document").ready(function(){ 
    $("main").append('<input type="file" name="photo" id="upload-photo"/>'); 
    $('#upload-photo').on('change',function(evt) { 
    alert(evt.target.files[0].name); 
    }); 
});