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

這是上傳的表單。使用jQuery從輸入[type ='file']獲取文件名

<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); 
});

來源

2012-12-08 dido

你必須做這個的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); 
    }); 
});

來源

2012-12-08 18:22:29 Jai

它返回一個包含'fakepath'的字符串。那是什麼？ –

它是瀏覽器安全性的本質，瀏覽器通常隱藏文件路徑 – Mikalai

-2

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

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

來源

2012-12-08 18:15:08 matsko

臨時文件AME你可能在服務器端看到的不是在客戶端生成的。這是在服務器端完成的。路徑不可訪問，但文件名本身是。 –

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

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

來源

2012-12-08 18:16:43

這不適用於這種情況。 – dido

反思一下，這可能是一個新鮮的javascript api。不確定像IE這樣的瀏覽器是否支持它。 –

brawser是Chrome。第二次點擊後請選擇文件...在控制檯中顯示的名稱。 – dido

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

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

或者

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

來源

2014-01-20 13:04:40 Pascalius

這是一個非常重要的問題，我爲了我的網站是多語言的。所以這裏是我在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); 
    }); 
});

來源

2015-06-10 15:29:00 Michel

示例HTML格式不正確。例如。靠近「'=」imageform「'」和'

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

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

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

來源

2015-08-21 21:31:00

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

來源

2017-03-05 13:47:29 user7661816

您可以訪問要傳遞參數給你的回調函數的性質（如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); 
    }); 
});

來源

2017-10-12 07:11:51

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

回答

相關問題