how to display finename insted of 'No file selected' in jquery fileupload

Question

i am using jquery fileupload to may project of asp.net mvc. its working fine but only one issue is that after select file , file name is not displaying and still displaying 'No file selected.' , how to display file name at place of 'No file selected'. i got file name using data.files[0].name , but how to display, i m usinf input type is file control.

my control is

 <input type="file" id="ItemImages" accept="image/*" name="uploadfile" data-val="true" data-val-required="please select a file" class="fileupload-new">

and my code is

 $('imffileuplod').fileupload({
        dataType: 'json',
        dropZone: null,
        url: DomainName + "BackOffice/" + MethodName,
        progressInterval: 10,
        bitrateInterval: 50,
        add: function (e, data) {
            try {

                var imageKbytes = parseFloat(data.files[0].size / 1024);
                var ImageMbytes = parseFloat(imageKbytes) / 1024;
                if (ImageMbytes > parseFloat(2.0)) {
                    $("#errormessage").text("Please upload image upto 2 MB only");
                    return;
                }
                alert(data.files[0].name);

                $("#errormessage").text("");
                $('#progress .bar').text('');
                $('#progress .bar').css('width', '0%');


                $('#progress .bar').show();
               data.submit();

            }
            catch (ex) {
                OpenAlertDialog(ex.message);
            }

        },
        done: function (e, data) {
            $('#progress .bar').css("width", "100%");
            $('#progress .bar').text('100%');

            $("#" + ImageSrcId).attr("src", data.result);

            setTimeout(function () {
                $('#progress .bar').css("width", "0%");
                $('#progress .bar').text('');
            }, 3000);
            // $("#ProgressSpan").text('');

        },
        Fail: function (e) {
        }
    });
}

after selecting imaage still it displays 'No file selected'

Answer 1

You cannot change value of input type file using Js but can take seperate div bellow that and display file name in it.

 if you work with ´jquery 1.8´, the selector ´type=file´ works correctly but if you work with ´jquery 1.6´ this selector will not work. the correct way is to use this type of selectors:

$('input[type="file"]')
or, you can use this type selector, with class:

HTML:

<input class="input-type-file" type="file" name="file_1" enctype="multipart/form-data" />
JS:

$('.input-type-file')