Отображение загрузки изображения после обновления страницы - PullRequest
Новая
       8

Отображение загрузки изображения после обновления страницы

0 голосов
/ 01 октября 2018

Привет, у меня есть форма регистрации с загрузкой аватара.

Форма работает отлично, и я доволен ею, но у меня 1 проблема.

После того, как я загрузил изображение аватараи перейти на следующую страницу, я могу затем вернуться на страницу регистрации, и изображение остается в памяти ...

Но у меня нет возможности отобразить его, так как я не знаю, как получить к нему доступ, так как оногде-то в памяти

Но я могу в этот момент снова завершить свою регистрацию, не загружая изображение. Затем изображение отобразится на следующей странице ..

(«обязательный» игнорируется в форметакже, поскольку у него есть файл в памяти)

Не уверен, что это объяснение приносит мне какую-либо пользу, но если таковые имеются, я могу видеть из моего кода, как я мог бы снова отобразить изображение, если оно находится в памяти после обновления страницы.

Спасибо.

Простая версия.

"Как получить доступ к загруженному изображению, если оно все еще находится в памяти, и снова отобразить его на странице Обновить ..." 

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

1 Ответ

0 голосов
/ 02 октября 2018

Когда страница обновляется, 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 и добавить закодированное изображение,Загрузка закодированного изображения в качестве фона CSS в JavaScript не работает, поэтому вам придется вставить его как изображение. 

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