簡體   English   中英

文本字段啟動文件上傳對話框:如何獲取文件名?

[英]Text field to launch file upload dialog: how to get the filename?

我創建了一個文本字段,單擊該文本字段將打開一個文件上傳對話框。 我通過創建具有可見性的第二個輸入標簽來做到這一點:隱藏。

我希望在對話框中選擇的文件隨后顯示在文本字段中,但無法使其正常工作。 我什至還無法通過jQuery獲取文件名。 我想念什么?

這是我的代碼:

 $('#import-file-text-field').click(function(){ $("#import-file-text-field-hidden").trigger("click"); // $("#import-file-text-field-hidden").show(); let filename = $('#import-file-text-field-hidden').val(); var f = $('input[type=file]').val(); console.log("File chosen for upload:", filename, f) }); 
 body { background-color: #aaa; font-family: 'Raleway', sans-serif; color: #aaa; } .import_list_table { width: 380px; background-color: #fff; margin: 20px; border-radius: 10px; } .import_list_table td { padding-left: 10px; } .gray-button { text-align: center; background-color: #ccc; padding: 6px 12px 10px 12px; height: 33px; width: 162px; color: white; border-radius: 6px; font-size: 13px; margin: 0px 10px 15px 0px; border: none; cursor: pointer; } .green-button { text-align: center; background-color: #b3d450; padding: 6px 12px 10px 12px; height: 33px; width: 162px; color: white; border-radius: 6px; font-size: 13px; margin: 0px 10px 15px 10px; border: none; cursor: pointer; } .gray-button:hover, .green-button:hover{ opacity: .60; color: #000; } .gray-button:active, .green-button:active{ opacity: 1.0; border: none; text-decoration: none; } .import-blue-box { height: 70px; width: 70px; background-color: #59a2c8; border-radius: 8px; position: relative; } .import-blue-box .fa-file-image { padding-top: 12px; padding-left: 16px; text-align: center; color: white; } #import-file-text-field{ border-radius: 10px; height: 32px; border: 1px solid #ccc; width: 260px; line-height: 24px; padding-left: 6px; } 
 <table class="import_list_table" border=0> <tr> <td colspan="2"><center><h4>Upload a file to import your contact list.</h4></center></td> </tr> <tr> <td> <div class="import-blue-box"> <i class="far fa-file-image fa-3x"></i> </div> </td> <td><br> <input type="text" id="import-file-text-field" placeholder="No file chosen"> <input id="import-file-text-field-hidden" type="file" style="visibility: hidden;"/> <br> </td> </tr> <tr> <td colspan="2"> <div> <br> <button type="button" class="gray-button pull-left" id="import_cancel_button" data-dismiss="modal">Cancel</button> <button type="button" class="green-button pull-right" id="import_list_button" data-dismiss="modal">Import List</button> </div> </td> </tr> </table> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

進行change事件並獲取文件輸入值或files屬性。
這是一個簡化的版本:

 var $name = $("#name"), $file = $("#file"); $name.on("click", function(){ $file.trigger("click"); }); $file.on("change", function(e) { var data = $file.prop('files')[0]; if(!data) return; data.fakepath = $file.val(); $name.val( data.name ); console.log( data ); }); 
 <input type="text" id="name" placeholder="No file chosen"> <input id="file" type="file" hidden> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 


在普通的JS中,它看起來像:

 const EL = s => document.querySelector(s), EL_name = EL('#name'), EL_file = EL('#file'); EL_name.addEventListener("click", () => EL_file.click() ); EL_file.addEventListener("change", () => { let data = EL_file.files[0]; if(!data) return; data.fakepath = EL_file.value; EL_name.value = data.name; console.log( data ); }); 
 <input type="text" id="name" placeholder="No file chosen"> <input id="file" type="file" hidden> 

input type=text點擊事件處理程序可以簡化為:

$('#import-file-text-field').click(function(){
  $("#import-file-text-field-hidden").trigger("click");
});

現在將事件監聽器添加到隱藏的input=file如下所示:

$("#import-file-text-field-hidden").on('change', function()
{
  let filename = $('#import-file-text-field-hidden').val();
  var f  = $('input[type=file]').val();
  console.log("File chosen for upload:", filename, f)
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM