使用返回假路徑的 html 和 javascript 上傳圖像文件

Question

我正在嘗試在我的網站上上傳圖片以將其作為 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 時我該怎么做？

Answer 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;
}

Answer 2

試試這個 ！ 使用：替換

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