Question

我创建了一个弹出窗口，您可以从中选择要上传的文件，其结构如下：

<div id = 'upload_container'>
    <span id = "close_btn">X</span>
    <!--Content-->
    <input type = 'file' id = 'upload_hidden' name = 'file_to_upload'>
    <p id = 'upload_container_text'>Choose a file to upload</p>
    <p id = 'file_name'><?php echo $file_name ?></p>
    <!-- // -->
</div>

我触发窗口选择文件的方法是点击“选择要上传的文件”，这将触发隐藏文件输入的点击事件。

我现在要做的是在id 'file_name'的段落上显示所选的文件名。我尝试的是：

$file_name = "";
if(isset($_FILES['file_to_upload'])){
    $file_name = $_FILES['file_to_upload']['name'];
}

和我添加的段落：

<p id = 'file_name'><?php echo $file_name ?></p>

但没有任何反应。有什么想法吗？

谢谢。

Answer 1

要获取选择上传的文件的文件名，请使用javascript。在我输入的文件上附加一个onchange监听器，然后获取文件名并输出到段落。

<input type='file' id='file' onchange='getFileData(this)'/>

<script>
function getFileData(object){
var file = object.files[0];
var name = file.name;//you can set the name to the paragraph id 
document.getElementById('file_name').value=name;//set name using core javascript

}

</script>

Answer 2

对于隐藏输入文件的触发器，您可以使用以下代码调用：

$('#upload_container_text').click(function(){
  $('#upload_hidden').trigger('click');
}

要通过客户端获取文件名，您可以尝试使用它：

$('#upload_hidden').change(function(){
  var reader = new FileReader();
  reader.onload = function(e){
    $('#filename').text(e.name); // or you can pass this.files[0];
  }
  reader.readAsDataURL(this.files[0]);
  $(this).val(reader);
});

通过服务器端获取文件名：

您可以将包含表单和属性操作的文件名传递到您的网址
使用$ _GET [＆＃39;您提交＆＃39;]
Echo $ _GET [＆＃39;您的文件＆＃39;]在p中，带有id文件名 }）;

选择一个文件时获取文件名

2 个答案: