Проблема с отображением изображения на всплывающем экране (предварительном просмотре) (при использовании JQuery) - PullRequest
Новая
       9

Проблема с отображением изображения на всплывающем экране (предварительном просмотре) (при использовании JQuery)

0 голосов
/ 28 мая 2020

Я создаю регистрационную форму. Я хочу, чтобы пользователи видели предварительный просмотр своей заполненной формы во всплывающем экране. Для этой цели я использую JQuery. Но я не могу отобразить выбранное изображение на экране предварительного просмотра. Вместо этого отображается путь к изображению. Вот мой код.

index. html

<div id="page">
<form class="mform" id="myform" method="POST" id="myform" action="" enctype="multipart/form-data">
    {% csrf_token %}
<fieldset>  
    <legend>Registeration</legend> 
    <table cellspacing="0"><tbody>
    <tr><td>
        <label for="u_name"> Username :</label></td><td>
            <input type="text" name="name" id="u_name">
<td>
</tr>
<tr><td>
    <label for="u_email"> Email :</label></td><td>
        <input type="email" name="email" id="u_email" >
</td></tr>
<tr><td>
    <label for="u_num"> Phone :</label></td><td>
        <input type="text" name="phoneNumber" id="u_num" >
</td></tr>
<tr><td>
    <label for="u_img"> IDCard :</label></td><td>
        <input type='file' accept='image/*' onchange='openFile(event)' name="idCard" id="u_img">
</td></tr>
<tr><td></td>
<td><input type="submit" value="submit"></td></tr>
</tbody></table>
</fieldset>
</form>
</div>

форма предварительного просмотра. js

(function($){
    
    $.fn.previewForm = function(options){
        var form_settings = $.extend({
            identifier         : 'label',
            show_password        : true,
            extratext    : 'Do You Want To submit',
            yes  : 'yes',
            no   : 'no',
            title    : 'Please preview'         
        }, options);
                
            var dia_log;    
            var renderBUTTON;
            var this_frm;
            this_frm = $(this);
        
    $(this).submit(function (){

    if($('#pfomdata').length){
                        return true;
                    }
        
        
        dia_log="";
        var needle_cnfrm;
    
        if(this.id.length > 0){ needle_cnfrm = '#'+this.id+' label'; }
        else  { needle_cnfrm = '.'+$(this).attr('class')+' label'; }
        
    $(needle_cnfrm).each(function(i,val) { 
        if($(this).text().length >2){
            
    what_t= $('#'+$(this).attr('for')) ;
    
    switch(what_t.prop('type')){
    case 'password':
    if(!form_settings.show_password)
        dia_log +=$(this).text() + " your selected password<br/>";
    else
        dia_log +=$(this).text() +what_t.val()+"<br/>";
        break;
    case 'select-one':
    dia_log +=$(this).text()  +$('#'+$(this).attr('for')+' option:selected').text()+"<br/>";
        break;
    case 'radio':
    if( what_t.is(':checked'))
    dia_log +=$(this).text() +' '+what_t.val()+"<br/>";
        break;
    case 'checkbox':
    if( what_t.is(':checked'))
    dia_log +=$(this).text() +' '+what_t.val()+"<br/>";
        break;
    case 'files':
    dia_log +=$(this).text() +' '+what_t.val()+"<br/>";
        break;
    case 'undefined':
        break;
    default:
    dia_log +=$(this).text() +what_t.val()+"<br/>";
    break;
    
    }
    }
        });
        dia_log = dia_log.replace('undefined', '');
        
        
        renderBUTTON="";
        renderBUTTON += '<a href="javascript:void(0);" class="button form_yes">'+form_settings.yes+'<span></span></a>';
        renderBUTTON += '<a href="javascript:void(0);" class="button form_no">'+form_settings.no+'<span></span></a>';
        
        var renderTemplate = [
            '<div id="previewOverlay">',
            '<div id="previewBox">',
            '<h1>',form_settings.title,'</h1>',
            '<p>',dia_log,'</p>',
            '<p>',form_settings.extratext,'</p>',
            '<div id="previewButtons">',
            renderBUTTON,
            '</div></div></div>'
        ].join('');
        
        $(renderTemplate).hide().appendTo('body').fadeIn();
        
    $(".form_yes") .click(function(){ 
            var input = $("<input>").attr("type", "hidden").attr("id", "pfomdata").val("true");
                this_frm.append($(input));
                this_frm.submit();
            });
            
    $(".form_no") .click(function(){
                $('#previewOverlay').fadeOut(function(){
                $(this).remove();
                    });
            });
                    
    return false;
            
        });
    }
    
})(jQuery);

Вместо выбранного изображения изображение отображается путь.

...