jquery文件上传插件-选择的文件名不显示答案

【问题标题】：jquery file upload plugin- selected file name not being displayedjquery文件上传插件-选择的文件名不显示
【发布时间】：2013-08-12 20:58:06
【问题描述】：

我正在使用 jquery 文件上传插件（基本）一次上传单个文件。插件工作正常，我可以看到文件转储在正确的目录中，一切都很好！但是，当我选择一个文件时，不会显示所选文件的名称（Chrome）/路径（IE），而只会显示“未选择文件”。如何更改它以显示所选文件的名称？我的代码：

脚本：

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

        });

家庭控制器：

[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>

【问题讨论】：

标签： html blueimp jquery-file-upload

【解决方案1】：

将以下参数传递给 fileupload 调用：

$('#fileupload').fileupload({

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

replaceFileInput:false 用于显示选中的文件名

【讨论】：

谢谢，这是正确的。对于任何想知道的人来说，关键属性是replaceFileInput: false。
这个答案可以通过说明重要的位是“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>

看起来你的大部分脚本都在工作（根据你所说的）；所以我们只会改变一些事情。首先，我们将把data.file 命令（在调整它之后）移动到add: 函数中...接下来，我们将创建一些自定义vars 来以某种顺序显示文件名（并且是能够更轻松地设置它们的样式）。

脚本：

$(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

     });               

});

我必须承认，我自己无法解决这个问题……感谢Martin Angelov's 关于使用 blueimp 的 jquery-file-upload 插件上传文件的教程。 ;)

我希望这会有所帮助！

【讨论】：

感谢您的宝贵时间。我们最终创建了自己的插件。