0

我想准备一张个人资料图片上传表格。这里有什么必要？能够在提交之前查看图像如何适合，这是我不幸陷入困境的那一刻。我在此处附加了我的 JSP 和 JS 文件中的表单元素，该元素应该处理通过 formData 检索表单文件。由于某种原因，JS 不愿意对 backgroundImage 属性做任何事情，也不会引发任何类型的错误。我真的很想为这项任务提供一些帮助。只使用简单的语言，因为我是一个极端主义者；）。

HTML：

 <div class="profilePicture">
                <form class="choosePhotoLabel" enctype="multipart/form-data" action="savePictureServlet" method="post">
                    <input class="choosePhoto" type="file" name="picture">
                    <input class="photoOk" type="submit" value="this is the picture!">
                </form>
            </div>

JavaScript：

document.addEventListener("DOMContentLoaded", function () {
    let formInHTML = document.getElementsByClassName("choosePhotoLabel").item(0);
    let formInputInHTML = document.getElementsByClassName("choosePhoto").item(0);
    let imagePlace = document.getElementsByClassName("profilePicture").item(0);

    let pictureReader = new FileReader();

    function mlemToFile(mlem) {
        mlem.lastModifiedDate = new Date();
        mlem.name = "nonMlemPicture";
        return mlem;
    }

    formInputInHTML.addEventListener("change", function () {
        let formData = new FormData(formInHTML);
        let formPicture = formData.get("picture");

        if (formPicture != null) {
            let nonMlemPicture = mlemToFile(formPicture);
            pictureReader.readAsDataURL(nonMlemPicture);

            if (pictureReader.result != null) {
                let picture64 = pictureReader.result.replace(/^data:.+;base64,/, '');
                imagePlace.style.backgroundImage = picture64;
            }
        }
    });
});
4

2 回答 2

0

简短的解决方案

let uploadInput = document.getElementById("uploadInput");

uploadInput.onchange = function () {
  let image = new FileReader();
  
  image.onload = function (e) {
    document.getElementById("imagePreview").src = e.target.result;
    };
  image.readAsDataURL(this.files[0]);
};
 
<input type="file" id="uploadInput" />

<img id="imagePreview" style="width:300px;" class="normal" />

于 2020-11-29T16:37:00.593 回答
0

FileReader 是异步的，这意味着您必须等待读取结果。

你错过了：

pictureReader.onload = function () {
  // code to set the image source
}

你也不应该data:.+;base64在开头删除前缀 ( ) - 这部分很重要

但我认为您不应该使用文件阅读器来显示 base64 图像。使用对象 url以二进制形式引用 blob/文件会更好更快。

另外，不要使用 formdata，而是使用formInputInHTML.files[0]

formInputInHTML.addEventListener("change", function () {
    const formPicture = formInputInHTML.files[0];
    const url = URL.createObjectURL(formPicture);
    imagePlace.style.backgroundImage = `url(${url})`;
});
于 2020-11-29T16:37:12.343 回答