如何在上传之前获取文件名并在没有 fakepath 的情况下传递到另一个文本输入字段

Posted

技术标签:

【中文标题】如何在上传之前获取文件名并在没有 fakepath 的情况下传递到另一个文本输入字段【英文标题】：How to get file name before upload and pass to another text input field without fakepath 【发布时间】：2019-11-04 19:20:10 【问题描述】：

我想上传一个文件夹中的图像（在服务器上），并希望在文件输入选择上获取图像名称并将这个图像名称传递给另一个没有 fakepath 的文本输入字段。这是我的代码： 这是文件上传php代码

<?php

if (($_FILES['my_file']['name']!=""))
// Where the file is going to be stored
$target_dir = "upload/";
$file = $_FILES['my_file']['name'];
$path = pathinfo($file);
$filename = $path['filename'];
$ext = $path['extension'];
$temp_name = $_FILES['my_file']['tmp_name'];
$path_filename_ext = $target_dir.$filename.".".$ext;

// Check if file already exists
if (file_exists($path_filename_ext)) 
echo "Sorry, file already exists.";
else
move_uploaded_file($temp_name,$path_filename_ext);
echo "Congratulations! File Uploaded Successfully.";


?>

这是json文件写代码

<?php
$message = '';
$error = '';

if(isset($_POST["submit"]))


if(empty($_POST["filename"]))

$error = "<label class='text-danger'>some text </label>";


else

if(file_exists('jasonfile.json'))

$current_data = file_get_contents('jasonfile.json');
$array_data  = json_decode($current_data, true);

$item = array

( 
'ImageUrl'        =>     $_POST["filename"]
);
array_unshift($array_data["user"] , $item);

$final_data  = json_encode($array_data);
if(file_put_contents('jasonfile.json', $final_data))

else
$error = 'JSON File not exits';

?>

这是我的表单 html 代码 我想获取图像文件名并作为值传递给第二个文本输入字段

<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="container" style="width:500px;">
<h3 align="center">Upload YOUR file in folder</h3>
<form action = "?" method="post" enctype ="multipart/form-data">
<?php

?>

<form name="form" method="post" enctype="multipart/form-data" >
<input type="file" name="my_file" onchange="this.form.filename.value = this.value" /> 
<input type="text" name="filename" />
<input type="submit" name="submit" value="Upload"/>
</form>


</form>
</div>
</body>
</html>

提前致谢:)

【问题讨论】：

【参考方案1】：

可以实现输入文件的change事件，获取e.target.files[0].name;

$('input[type="file"]').change(function(e)
        var fileName = e.target.files[0].name;
        $('[name=filename]').val(fileName.replace(/C:\\fakepath\\/i, ''));
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="form" method="post" enctype="multipart/form-data" >
<input type="file" name="my_file" onchange="this.form.filename.value = this.value" /> 
<input type="text" name="filename" />
<input type="submit" name="submit" value="Upload"/>
</form>

【讨论】：

谢谢兄弟！ @Hien Nguyen 结果是这个C:\fakepath\entertainment.png 我只想要文件名 entertainment.png 如何删除这部分 `C:\fakepath`

以上是关于如何在上传之前获取文件名并在没有 fakepath 的情况下传递到另一个文本输入字段的主要内容，如果未能解决你的问题，请参考以下文章

求助，chrome的关于fakepath的解决办法

IE浏览器上传文件时本地路径变成”C:\fakepath\”的问题,这个怎么解决？急急急

使用 cloudinary npm 模块上传图片

求助，chrome的关于fakepath的解决办法

在 React Dropzone 中获取本地文件路径

用JavaScript实现“上传并预览图片”时，默认浏览器Firefox无法获得图片路径，显示fakepath，如何解决？