Jquery file upload plugin - выбранное имя файла не отображается

Я использую плагин загрузки файла jquery (basic) для загрузки одного файла за раз. Плагин отлично работает, и я могу видеть файлы, сбрасываемые в правильном каталоге, все хорошо! Однако, когда я выбираю файл, имя (Chrome)/path (IE) выбранного файла не отображается, вместо этого оно просто отображает "Нет выбранного файла". Как я могу изменить его, чтобы отобразить имя выбранного файла? Мой код:

Script:

$(function () {
            $('#fileupload').fileupload({
                dataType: 'json',
                url: '@Url.Action("Index", "Home")',
                add: function (e, data) {
                    data.submit(); 
                },
                progress: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#progress .bar').css('width', progress + '%');

                },
                done: function (e, data) {
                    $('<p/>').text(data.files[0].name).appendTo(document.body);                        
                }
                //multipart: false
            });               

        });

HomeController:

[HttpPost]
    public ActionResult Index(HttpPostedFileBase files)
    {           
        return Json(files.FileName);
    }

Указатель:

<input id="fileupload" type="file"  name="files"/>
<div id="progress" style="width: 250px">
    <div class="bar" style="width: 0%;"></div>
</div>

Ответы

Ответ 1

Передайте следующие аргументы вызову fileupload:

$('#fileupload').fileupload({

    formData:{extra:1},
    autoUpload: false,
    url: "uploader.php",
    replaceFileInput:false,
    fileInput: $("input:file")
});

replaceFileInput:false предназначен для отображения имени выбранного файла

Ответ 2

Если я правильно вас понимаю, вы хотите иметь возможность выбирать свои файлы, а затем отображать их имена на экране... Если это так, вы должны попробовать что-то вроде этого:

HTML:

<!--Don't forget to wrap your form elements inside a form-->
<input id="fileupload" type="file" name="files" />

<ul id="selected-files">
    <!--File names will be displayed here-->
</ul>

<div id="progress" style="width: 250px">
    <div class="bar" style="width: 0%;"></div>
</div>

Похоже, что у вас большая часть вашей работы script (основанная на том, что вы сказали); поэтому мы будем менять только некоторые вещи. Сначала мы переместим команду data.file (после ее настройки) в функцию add: вместо... далее, мы создадим несколько пользовательских vars для отображения имен файлов с некоторым порядком (и будем способный упростить их стиль).

Script:

$(function () {

    var ul = $('#selected-files');

    $('#fileupload').fileupload({
        dataType: 'json',
        url: '@Url.Action("Index", "Home")',

         add: function (e, data) {
             var selectedFiles = $('<li class="file-name"><p></p></li>');
             selectedFiles.find('p').text(data.files[0].name);
             data.context = selectedFiles.appendTo(ul);

             data.submit(); 
         },

         progress: function (e, data) {
             var progress = parseInt(data.loaded / data.total * 100, 10);
             $('#progress .bar').css('width', progress + '%');
         }

         //multipart: false

     });               

});

Я должен признать, что я бы не подумал об этом самостоятельно... благодаря учебник Мартина Ангелова о загрузке файлов с помощью jimp -file-upload плагин.;)

Надеюсь, это поможет!