input file field

by hiteshbhilai2010

HTML

<div class="nameHolder">
                            <p class="sub-title-1">Low resolution</p>
                        </div>
                        <div class="inputHolder" id="gl_img_low_main" tabindex="-1">
                            <input type="text" placeholder="Low resolution file" class="dupInput"/>
                            <input type="file" placeholder="Low resolution file" class="dupFile" id="gl_img_low"/>
                            
                        </div>
                        <div class="nameHolder">
                            <p class="sub-title-1">Medium resolution</p>
                        </div>
                        <div class="inputHolder" id="gl_img_med_main" tabindex="-1">
                            <input type="text" placeholder="Medium resolution file" class="dupInput"/>
                            <input type="file" placeholder="Medium resolution file" class="dupFile" id="gl_img_med"/>
                            
                        </div>
                        <div class="nameHolder">
                            <p class="sub-title-1">High resolution</p>
                        </div>
                        <div class="inputHolder" id="gl_img_high_main" tabindex="-1">
                            <input type="text" placeholder="High resolution file" class="dupInput"/>
                            <input type="file" placeholder="High resolution file" class="dupFile" id="gl_img_high"/>
                            
                        </div>

<br/><br/>
<button id = "reset">Reset</button>
<button id = "print">print</button>

JavaScript

$(document).ready(function() {
   
   var glImgLow = '',
       glImgMed = '',
       glImgHigh = '',
       gl_img_low_btn = $("#gl_img_low"),
       gl_img_med_btn = $("#gl_img_med"),
       gl_img_high_btn = $("#gl_img_high");
 //Selecting low resolution image
    $('#gl_img_low').on('change', function(event) {
        var imgName = event.target.files;
        glImgLow = '/bucket/' + imgName[0].name;
    });

    //Selecting medium resolution image
    $('#gl_img_med').on('change', function(event) {
        var imgName = event.target.files;
        glImgMed = '/bucket/' + imgName[0].name;
    });

    //Selecting high resolution image
    $('#gl_img_high').on('change', function(event) {
        var imgName = event.target.files;
        glImgHigh = '/bucket/' + imgName[0].name;
    });

    //click on print button after selecting all three files 
    $("#print").on('click', function(event){
        alert(glImgLow);
        alert(glImgMed);
        alert(glImgHigh);
    })
    //afetr selecting values click reset to reset all input field 
    $("#reset").on('click', function(event){
                    //clearing file input --- path values
            gl_img_low_btn.replaceWith(gl_img_low_btn = gl_img_low_btn.clone(true));
            gl_img_med_btn.replaceWith(gl_img_med_btn = gl_img_med_btn.clone(true));
            gl_img_high_btn.replaceWith(gl_img_high_btn = gl_img_high_btn.clone(true));
        
        alert($(gl_img_low_btn).val());
        alert($(gl_img_med_btn).val());
        alert($(gl_img_high_btn).val());
        alert(glImgLow)
        alert(glImgMed)
        alert(glImgHigh)

    })
    
});