Question

嗨，我有一个带有头像上传的注册表格。

表格运行正常，我对此感到满意，但是我有1个问题。

我上传了头像图片并进入下一页后，我可以返回注册页面，该图片仍保留在内存中...

但是我无法显示它，因为我不知道如何访问图像，因为它在某处的内存中。

但是我现在可以再次完成注册而不必上传图像，然后图像显示在下一页上。

（“ required”在形式上也会被忽略，因为它在内存中有一个文件）

不确定这种解释是否对我有帮助，但是如果有任何一个人可以从我的代码中看到页面刷新后在内存中如何再次显示图像。

谢谢。

简单版本。

“如果仍在内存中，如何访问上载的图像并在页面刷新时再次显示它...”

    <form id='login-form' name='formsub' class='form' action='../imageupload/formfillsignup.php' method='post' enctype='multipart/form-data'>


    <label id='usernamelabel'>UserName</label>   
    <input id='em1' type='name' name='username' placeholder='3-15 Characters ' pattern='^[a-zA-Z][a-zA-Z0-9-_\. ]{3,15}$'  autocomplete='new-password' required onChange='checkusername();' class='imp'/>


    <label id='emaillabel'>Email</label>     
    <input id='em2' type='email' autocomplete='new-email' placeholder='Standard Email Format Required' name='email' pattern='[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z]{2,}'required onChange='alertemail();' class='imp' />


    <label id='passwordlabel'>PassWord</label>   <div class='reveal' id='revealPass' onclick='revealpasswords();' title='show/hide Passwords'></div>
    <input id='p1' type='password' autocomplete='new-password' placeholder='1 UpperCase + 1 Number' name='password' pattern='(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}'  required  onChange='alertpass();' class='imp' />


    <label id='confirmpasswordlabel'>Confirm PassWord</label> 
    <input id='p2' type='password' autocomplete='new-password' placeholder='1 UpperCase + 1 Number ' name='confirmpassword' pattern='(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}' required  onChange='checkPasswordMatch();' class='imp'/>




    <label class="custom-file-upload">
    <input type="file" id="file1" name="avatar" accept="image/*" required />

    <h7>Upload Avatar</h7>

    </label>


    <div class='image' id='imagediv'></div>

<button class='signupbutton' type='button' onclick='checkfile();'>Register</button>

</form>



<script>
            $(function () {

    $('input[type=file]').change(function () {
        var val = $(this).val().toLowerCase(),
            regex = new RegExp("(.*?)\.(jpg|jpeg|png|gif|bmp|JPG|JPEG|PNG|GIF|BMP)$");

        if (!(regex.test(val))) {
            $(this).val('');
           $("#signintext").text("JPG JPEG PNG BMP GIF ONLY"),  $("#signintext").css({"color":"#f40351"}), $( "#signintext" ).addClass( "errorglow" );
            $('#imagediv').css('background-image', 'url("../images/mainpage/uploadimage.jpg")');
            $('#imagediv').css('opacity','0.2');
        }else
            {
                        if (regex.test(val)) { 
                                    $("#signintext").text("Avatar Upload Completed"),  $("#signintext").css({"color":"#03f4bc"}) , $( "#signintext" ).removeClass( "errorglow" );
                                    var file = this.files[0];
                                    var reader = new FileReader();
                                    reader.onloadend = function () {
                                       $('#imagediv').css('background-image', 'url("' + reader.result + '")');
                                        $('#imagediv').css('opacity','1');

                                    }
                                    if (file) {
                                        reader.readAsDataURL(file);
                                    } else {
                                        var file1=document.getElementById('file1');
                                        file1.files.length == 0;
                                        $(file1).val('');
                                        return false;
                                    }



                        }

            }
    });     
</script>

Answer 1

刷新页面时，将完全重建DOM。要在刷新后保留图像，请使用localStorage。首次上传图片时，您将其保存在本地。页面加载后，您将检查localStorage是否存在图片；如果存在图像，则将其加载到图像框中。

您需要以base64编码保存图像。为此，请监听文件上传更改事件，然后使用FileReader编码为数据URL。

document.getElementById("file1").addEventListener('change', function() {
    var file = this.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
        localStorage.setItem("profileImageData", reader.result);
   };
} );

加载页面后，您需要检查localStorage并添加编码图像。无法在JavaScript中将编码的图像作为CSS背景加载，因此您必须将其作为图像插入。

window.onload = function() {
    var profileImage = localStorage.getItem("profileImageData");
    if (profileImage !== null) {
        document.getElementyId("imagediv").innerHTML = "<img src='" + profileImage + "'>";
    }
}

页面刷新后显示图像上传

1 个答案: