Question

我正在使用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
            });               

        });

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>

Answer 1

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

$('#fileupload').fileupload({

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

replaceFileInput:false用于显示所选文件名

Answer 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

     });               

});

我必须承认我不会自己解决这个问题...感谢使用blueimp的jquery-file-upload插件上传文件的Martin Angelov's教程。 ;）

我希望这有帮助！

jquery文件上传插件 - 未显示所选文件名

2 个答案: