如何在oninput事件触发时为file input的取值添加路径前缀

错误原因 #

你写的代码存在两个核心问题导致无法生效：

• 浏览器安全限制：type="file"类型的输入框的value属性是只读的，浏览器为了避免恶意脚本私自篡改用户上传的文件路径，禁止手动修改该属性，直接赋值不会生效。
• 语法错误：获取选中文件名称的写法有误，不存在file.value属性，正确的获取方式是访问files伪数组中第一个文件对象的name属性，即document.getElementById('book_img').files[0].name。

修复方案 #

因为不能直接修改文件输入框的value，我们可以新增一个隐藏的输入框，专门用来存储拼接好的路径，后端提交时取这个隐藏输入框的值存入数据库即可：

调整后的HTML代码

<label for="fname">Book Image</label><br>
<input type="file" id="book_img" oninput="addDir()">
<!-- 新增隐藏输入框，存储拼接后的路径，后端读取这个字段即可 -->
<input type="hidden" name="book_img" id="book_img_final">

调整后的JavaScript代码

<script type="text/javascript">
function addDir() {
    const imgDir = 'img/books/'
    const fileInput = document.getElementById('book_img')
    // 先判断是否选中了文件，避免空值报错
    if (fileInput.files && fileInput.files.length > 0) {
        const finalPath = imgDir + fileInput.files[0].name
        document.getElementById('book_img_final').value = finalPath
    }
}
</script>

补充说明 #

更推荐的做法是后端拼接路径：前端只需要把选中的文件名传给后端，由后端代码拼接img/books/前缀后存入数据库，这样可以避免前端路径被恶意篡改，可靠性更高。

内容的提问来源于stack exchange，提问作者Isabella