使用返回fakepath的html和javascript上传图像文件答案

【问题标题】：Uploading image file using html and javascript returning fakepath使用返回fakepath的html和javascript上传图像文件
【发布时间】：2019-09-17 20:08:50
【问题描述】：

我正在尝试在我的网站上上传图片以将其作为 base64 编码字符串添加到数据库中。问题是我无法接收通过 java 上传的文件路径。在前端我使用 HTML 和 javascript，这里是 HTML 标签：

<div class="col-xs-6">
    <label>passport image </label><input id="image-input" type="file"
                        placeholder="file">
    </div>

在我添加的javascript中：

document.getElementById("image-input").value;

到达我的图像路径是“C:\fakepath\IMAGE_NAME”。我需要一种方法来发送照片或它的 java 代码路径，当我不使用 jsf 或 spring 时，我该怎么做。

【问题讨论】：

你在 Java 中尝试过什么？
Java != JavaScript
这是一种安全措施，现代浏览器不再透露文件在客户端的原始位置，而是用这个假条目代替它。你仍然得到原始文件名。
我知道@JackBashford 。我正在使用javascript通过ajax查询将表单参数解析为java servlet，但我不知道如何解析文件而不是路径。

标签： javascript html file-upload

【解决方案1】：

某些浏览器具有阻止 JavaScript 访问的安全功能知道文件的本地完整路径。这是有道理的——作为客户，你不希望服务器知道你本地机器的文件系统。

我在输入 onchange 事件上使用对象 FileReader 进行输入文件类型！此示例使用 readAsDataURL 函数并为此原因你应该有一个标签。 FileReader 对象也有 readAsBinaryString 获取二进制数据，稍后可用于在您的服务器上创建相同的文件

例子：

var input = document.getElementById("inputFile");
var fReader = new FileReader();
fReader.readAsDataURL(input.files[0]);
fReader.onloadend = function(event){
    var img = document.getElementById("yourImgTag");
    img.src = event.target.result;
}

【讨论】：

感谢您的回答，这很有帮助，但这会在页面上显示图像，而我想通过 html 输入将其传递给 servlet。你能帮忙吗？
是的，这个链接tutorialspoint.com/servlets/servlets-file-uploading.htm 应该可以帮助你。让我知道这可以满足您的需求。
这个答案是我需要的。在使用函数 readAsDataURL 时，我从一开始就没有注意到源将被转换为编码图像，而我需要将其保存在数据库中。

【解决方案2】：

试试这个！使用：替换

var imgpath = document.getElementById("image-input").value;
var newPath = imgpath .replace("C:\\fakepath\\", "")

【讨论】：