如何在 jquery fileupload 中显示文件名而不是“未选择文件”

Question

我正在使用 jquery 文件上传到 asp.net mvc 的可能项目。 它工作正常，但只有一个问题是在选择文件后，文件名没有显示并且仍然显示“未选择文件”。 ，如何在“未选择文件”的位置显示文件名。我使用 data.files[0].name 获得了文件名，但是如何显示，我使用的输入类型是文件控制。

我的控制是

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

我的代码是

 $('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) {
        }
    });
}

选择图像后仍然显示“未选择文件”

Answer 1

您不能使用 Js 更改输入类型文件的值，但可以使用单独的 div 并在其中显示文件名。

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