提交表单前显示图片 JavaScript

Question

我想准备个人资料图片上传表单。这里需要什么？能够在提交图像之前查看图像如何适合，不幸的是，这是我陷入困境的那一刻。我在此处附加了我的 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;
            }
        }
    });
});

Answer 1

简短的解决方案

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" />

Answer 2

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

你还缺：

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

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

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

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

formInputInHTML.addEventListener("change", function () {
    const formPicture = formInputInHTML.files[0];
    const url = URL.createObjectURL(formPicture);
    imagePlace.style.backgroundImage = `url(${url})`;
});

提交表单前显示图片 JavaScript

Displaying picture before submitting the form JavaScript

javascript

forms

profile-picture