jQuery文件上传插件不起作用

I am trying to use jQuery File Upload plugin in my site but at the moment it has been impossible, and the documentation is the worst I have ever seen. The only things I can see are some demos files with a lot of lines of code without any kind of explanation.

我试图在我的网站上使用jQuery文件上传插件,但目前它是不可能的,文档是我见过的最糟糕的。我能看到的唯一的东西是一些带有大量代码的演示文件,没有任何解释。

I have tried to use it in my site, with the CSS and JS files included in the demos, but the file upload plugin is not rendered as it should.

我试图在我的网站中使用它,演示中包含CSS和JS文件,但文件上传插件没有按照它应该呈现。

After some research, I have found that _renderUpload method of jquery.fileupload-jquery-ui.js is never called. Neither do _create method of the same file.Those methods are the responsible to add the CSS classes so that the file upload could look better.

经过一番研究,我发现永远不会调用jquery.fileupload-jquery-ui.js的_renderUpload方法。也没有_create相同文件的方法。这些方法负责添加CSS类,以便文件上传看起来更好。

This is the HTML code I have:

这是我的HTML代码:

<div class="fileupload-buttonbar">
    <div class="fileupload-buttons">
        <span class="fileinput-button">
            <span>Agregar archivo...</span>
            <input type="file" name="files[]">
        </span>
        <button type="submit" class="start">Importar</button>
    </div>
    <div class="fileupload-progress fade" style="display:none">
        <!-- The global progress bar -->
        <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
        <!-- The extended global progress information -->
        <div class="progress-extended">&nbsp;</div>
    </div>
</div>              
<table role="presentation"><tbody class="files"></tbody></table>

And this is the initialization:

这是初始化:

$(function () {
            $('#fileupload').fileupload({
                url: '@Url.Action("Import")',
                disableImageResize: false,
                maxFileSize: 30000,
                acceptFileTypes: /(\.|\/)(csv|txt|xls|xlsx)$/i,
                singleFileUploads: true,
                autoUpload: false,
                maxNumberOfFiles: 1,
                change: function (e, data) {
                    alert(data.files.length);
                    $.each(data.files, function (index, file) {
                        $('#import_file').text(file.name);
                        $('button#import').attr('style', 'display: ');
                        $('span#status').text('');
                    });
                },
                add: function (e, data) {
                    alert(data.files);
                    data.context = $('button#import')
                        .click(function () {
                            data.context = $('span#status').text('Importando...');
                            $('button#import').attr('style', 'display: none');
                            data.submit();
                        });
                },
                done: function (e, data) {
                    data.context.text('Completo.');
                    $("#administradores").trigger("reloadGrid", [{ page: 1 }]);
                }
            });

                $('#fileupload').addClass('fileupload-processing');
}

And finally, I told that I am including the following CSS file: jquery.fileupload-ui.css

最后,我告诉我包含以下CSS文件:jquery.fileupload-ui.css

And this is the JS files in this order:

这是这个顺序的JS文件:

• jquery.ui.widget.js
• jquery.iframe-transport.js
• jquery.fileupload.js
• jquery.fileupload-process.js
• jquery.fileupload-validate.js
• jquery.fileupload-ui.js
• jquery.fileupload-jquery-ui.js

Any help will be greatly appreciated

任何帮助将不胜感激

Thanks Jaime

1 个解决方案

#1

I has wrong div id. That was the problem.

我错了div id。那就是问题所在。

Regards, Jaime