14

我正在使用 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>
4

2 回答 2

20

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

$('#fileupload').fileupload({

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

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

于 2015-03-23T08:11:20.123 回答
1

如果我理解正确，您希望能够选择您的文件，然后将它们的名称显示在您的屏幕上......如果是这种情况，您应该尝试这样的事情：

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 的关于使用 blueimp 的 jquery-file-upload 插件上传文件的教程。;)

我希望这有帮助！

于 2014-01-08T18:17:22.083 回答