在提交之前，将上传附件名称添加到文本区域

Question

有什么方法可以在用户提交表单之前将文件名添加到文本区域？

有可能通过php/javascript实现吗？非常感谢。

<form id="Apply" name="Apply" method="post" enctype="multipart/form-data" action="applyLeave.php">
<p><select name="txtLeaveType" id="txtLeaveType">
<option value="">--Select--</option>
<option value="1" selected="selected">AL</option>
<option value="2">SL</option>
</select></p>
<p><textarea rows="3" cols="30" name="txtComment" id="txtComment" class="valid"></textarea></p>
<p>Select image to upload: <input type="file" name="fileToUpload" id="fileToUpload"></p>
<p><input type="submit" value="Submit" name="submit"></p>

Answer 1

是的，使用javascript:

在input:file上添加onchange事件，这样我们就可以跟踪事件

<form id="Apply" name="Apply" method="post" enctype="multipart/form-data" action="applyLeave.php">
<p><select name="txtLeaveType" id="txtLeaveType">
<option value="">--Select--</option>
<option value="1" selected="selected">AL</option>
<option value="2">SL</option>
</select></p>
<p><textarea rows="3" cols="30" name="txtComment" id="txtComment" class="valid"></textarea></p>
<p>Select image to upload: <input type="file" onchange="takeName(event)" name="fileToUpload" id="fileToUpload"></p>
<p><input type="submit" value="Submit" name="submit"></p>
</form>

并使用这个javascript代码

<script>
function takeName(event) {
let filename = event.path[0].files[0].name;
document.getElementById("txtComment").value = filename;
}
</script>

Answer 2

您可以使用以下代码来完成此操作。

document.getElementById('fileToUpload').addEventListener('change', openDialog);
function openDialog(e)
{
var file_name = e.target.files[0].name;
document.getElementById("txtComment").value = file_name;
}

<form id="Apply" name="Apply" method="post" enctype="multipart/form-data" action="applyLeave.php">
<p><select name="txtLeaveType" id="txtLeaveType">
<option value="">--Select--</option>
<option value="1" selected="selected">AL</option>
<option value="2">SL</option>
</select></p>
<p><textarea rows="3" cols="30" name="txtComment" id="txtComment" class="valid"></textarea></p>
<p>Select image to upload: <input type="file" name="fileToUpload" id="fileToUpload"></p>
<p><input type="submit" value="Submit" name="submit"></p>

Answer 3

尝试使用以下代码

let imageUpload = document.getElementById("fileToUpload");
let outputText =  document.getElementById("txtComment");
imageUpload.onchange = function () {
let input = this.files[0];
if (input) {
outputText.value = input.name;
}
}

<form id="Apply" name="Apply" method="post" enctype="multipart/form-data" action="applyLeave.php">
<p><select name="txtLeaveType" id="txtLeaveType">
<option value="">--Select--</option>
<option value="1" selected="selected">AL</option>
<option value="2">SL</option>
</select></p>

<p><textarea rows="3" cols="30" name="txtComment" id="txtComment" class="valid"></textarea></p>
<p>Select image to upload: <input type="file" name="fileToUpload" id="fileToUpload"></p>
<p><input type="submit" value="Submit" name="submit"></p>

<form id="Apply" name="Apply" method="post" enctype="multipart/form-data" action="applyLeave.php">
<p><select name="txtLeaveType" id="txtLeaveType">
<option value="">--Select--</option>
<option value="1" selected="selected">AL</option>
<option value="2">SL</option>
</select></p>

<p><textarea rows="3" cols="30" name="txtComment" id="txtComment" class="valid"></textarea></p>
<p>Select image to upload: <input type="file" name="fileToUpload" id="fileToUpload"></p>
<p><input type="submit" value="Submit" name="submit"></p>
<script type="text/javascript">
let imageUpload = document.getElementById("fileToUpload");
let outputText =  document.getElementById("txtComment");
imageUpload.onchange = function () {
let input = this.files[0];
if (input) {
outputText.value = input.name;
}
}
</script>