jQuery文件上传插件-启动/取消按钮和进度条不起作用

Question

在文档事件准备就绪时，问题是：

TypeError: this.element.find(...).find(...).each(...).end(...).find(...).button(...).end(...).find(...).button(...).end(...).find(...).button(...).end(...).find(...).progressbar不是函数。

jquery.fileupload-jquery-ui.js的第114行。

当我尝试输入时，在控制台中出现以下内容：

TypeError：$this.find（...）.find（...）.progressbar不是函数。

jquery.fileupload-jquery-ui.js的第45行。

TypeError：node.find（...）.empty（...）.progressbar不是函数。

jquery.fileupload-jquery-ui.js的第60行。

我注释了该行以不包含jquery.fileupload-jquery-ui.js。 使用选项autoUpload：true，上传文件正常工作。 如果autoUpload为false，则不会显示启动/取消按钮和进度条。

提示？

这是我的库：

• http://blueimp.github.io/JavaScript-Load-Image/js/load-image.min.js
• http://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js
• js/vendor/jquery.ui.widget.js
• js/jquery.iframe-transport.js
• js/jquery.fileupload.js
• js/jquery.fileupload-process.js
• js/libraries/jfu/js/jquery.fileupload-image.js
• js/libraries/jfu/js/jquery.fileupload-audio.js
• js/libraries/jfu/js/jquery.fileupload-video.js
• js/libraries/jfu/js/jquery.fileupload-validate.js
• js/libraries/jfu/js/jquery.fileupload-jquery-ui.js
• js/main.js
• js/libraries/jfu/css/style.css
• js/libraries/jfu/css/jquery.fileupload-ui.css -

当然还有jquery-1.8.2.min.js和bootstrap.min.js。

这是代码：

<div class="row">
    <div class="col-2"></div>
    <div class="col-8">
        <h3 style="text-align: center;">Upload your 3D model (.3ds, .stl, .obj)</h3>
        <div id="fileupload">
            <!-- 3D rendering antaning files -->
            <div id="fileupload-render">
                <div style="text-align: center;" class="fileupload-buttonbar">
                    <label class="fileinput-button">
                        <span  class="btn btn-primary">Add files...</span>
                        <form enctype="multipart/form-data">
                            <input type="file" accept="object/*" name="files[]" multiple>
                        </form>
                    </label>
                </div>     
                <table role="presentation" class="table item">
                    <tbody id="render-files" class="files"></tbody>
                </table>
            </div>
            <!-- i files-->
            <div id="fileupload-image">
                <h3 style="text-align:center;">Upload your image (.png, .jpeg, .gif)</h3>
                <div style="text-align: center;" class="fileupload-buttonbar">
                    <label class="fileinput-button">
                        <span  class="btn btn-primary">Add files...</span>
                        <form enctype="multipart/form-data">
                            <input type="file" accept="image/*" name="files2[]" multiple>
                        </form>
                    </label>
                    <span class="fileupload-process"></span>
                </div>     
                <table role="presentation" class="table item">
                    <tbody id="image-files" class="files"></tbody>
                </table>
            </div> 
            <!-- Multimedia files -->
            <div id="fileupload-multimedia">
                <h3 style="text-align:center;">Upload your video files (.avi, .mp4, .mpeg)</h3>
                <div style="text-align: center;" class="fileupload-buttonbar">
                    <label class="fileinput-button">
                        <span  class="btn btn-primary">Add files...</span>
                        <form enctype="multipart/form-data">
                            <input type="file" accept="video/*" name="files3[]" multiple>
                        </form>
                    </label>
                </div>     
                <table role="presentation" class="table item">
                    <tbody id="multimedia-files" class="files"></tbody>
                </table>
            </div>   
            <!-- The global progress state -->
            <div class="col-lg-5 fileupload-progress fade">
                <!-- The global progress bar -->
                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                    <div class="progress-bar progress-bar-success" style="width:0%;"></div>
                </div>
                <!-- The extended global progress state -->
                <div class="progress-extended">&nbsp;</div>
            </div>          
        </div>
        <div style="text-align: center;">
            <a class="btn btn-success" href="<?=$this->redirect?>"><?=$this->translate("Concludi")?></a>
        </div>
    </div>
</div>
<script>
/*jslint unparam: true, regexp: true */
/*global window, $ */
$(function () {
    'use strict';
    // Change this to the location of your server-side upload handler:
    var url = "/item/upload-file/";
    var uploadButton = $('<button/>')
        .addClass('btn btn-primary')
        .prop('disabled', true)
        .text('Processing...')
        .on('click', function () {
            var $this = $(this),
                data = $this.data();
            $this
                .off('click')
                .text('Abort')
                .on('click', function () {
                    $this.remove();
                    data.abort();
                });
            data.submit().always(function () {
                $this.remove();
            });
        });
        $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        autoUpload: true,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png|avi|stl|obj|3ds|mpeg)$/i,
//            maxFileSize: 50000000, // 5 MB
        previewMaxWidth: 100,
        previewMaxHeight: 100,
        previewCrop: true,
    })
    .on('fileuploadadd', function (e, data) {
            //console.log("trigger: " + $(this).attr('id'));
            console.log(data.files);
            data.context = $('#files');
            //console.log(data.context);
            $.each(data.files, function (index, file) {
                var htmlcheck = $('<tr class="cover_box"></tr><tr style="background-color: #E9E9E9; border: 1px solid #CCC;" class="template-upload"><td style="width: 120px" class="preview"></td><td class="name vertical-aligned"></td><td class="size vertical-aligned"></td><td class="upload-ok vertical-aligned"></td></tr>');
                htmlcheck.find('.name').text(file.name);
                htmlcheck.find('.size').text(file.size + ' kB');
                htmlcheck.find('.preview').text(file.preview);

                var html = $('<tr style="background-color: #E9E9E9; border: 1px solid #CCC;" class="template-upload"><td style="width: 120px" class="preview"></td><td class="name vertical-aligned"></td><td class="size vertical-aligned"></td><td class="upload-ok vertical-aligned"></td></tr>');
                html.find('.name').text(file.name);
                html.find('.size').text(file.size + ' kB');
                html.find('.preview').text(file.preview);

                if (file.type == 'image/png' || file.type == 'image/gif' || file.type == 'image/jpeg' || file.type == 'image/jpg') {
                    data.context = $('#image-files');
                    htmlcheck.appendTo(data.context);
                }
                else if (file.type == 'video/x-msvideo' || file.type == 'video/mp4' || file.type == 'video/mpeg') {
                    data.context = $('#multimedia-files');
                    htmlcheck.appendTo(data.context);
                }
                // #TODO: find the right file.type for render-files
                else if (file.type == 'image/3ds' || file.type == 'image/stl' || file.type == 'image/obj') {
                    data.context = $('#render-files');
                    html.appendTo(data.context);
                }
                else {
                    alert("Gianni, metti il formato giusto!")
                }
            });
        }).on('fileuploadprocessalways', function (e, data) {
            var node = '';
            var index = data.index,
                file = data.files[index];
                if (file.type == 'image/png' || file.type == 'image/gif' || file.type == 'image/jpeg' || file.type == 'image/jpg') {
                    node = $("#image-files tr:last td:first");
                }
                else if (file.type == 'video/x-msvideo' || file.type == 'video/mp4' || file.type == 'video/mpeg') {
                    node = $("#multimedia-files tr:last td:first");
                }
                //console.log(node);
            if (file.preview)
                node.prepend(file.preview);
            if (file.error) {
                node.prepend(file.error);
            }
        }).on('fileuploadprogressall', function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            console.log(data);
            $('#progress .progress-bar').css('width', progress + '%');
            $('#percentage').html(progress + '%');
        }).on('fileuploaddone', function (e, data) {
            $.each(data.result.files, function (index, file) {
                var link = $('<a>')
                    .attr('target', '_blank')
                    .prop('href', file.url);
                alert(file.type);
                $("#files tr:last td:first canvas").wrap(link);
                $('.upload-ok').html('Uploaded');
            });
        }).on('fileuploadfail', function (e, data) {
            $.each(data.result.files, function (index, file) {
                var error = $('<span/>').text(file.error);
                $(data.context.children()[index])
                    .append(error);
            });
        }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
     <tr class="template-upload fade">
         <td>
            <label><input type="checkbox" name="delete" value="1" class="unique">marck as cover</label>
        </td>

        <td>
            <span class="preview"></span>
        </td>
        <td>
            <p class="name">{%=file.name%}</p>
            <strong class="error text-danger"></strong>
        </td>
        <td>
            <p class="size">Processing...</p>
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
        </td>
        <td>
            {% if (!i && !o.options.autoUpload) { %}
                <button class="btn btn-primary start" disabled>
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>Start</span>
                </button>
            {% } %}
            {% if (!i) { %}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>

<script>
  $('input.unique').click(function() {
  $('input.unique:checked').not(this).removeAttr('checked');
  });
</script>

<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        <td>
            <span class="preview">
                {% if (file.thumbnailUrl) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
                {% } %}
            </span>
        </td>
        <td>
            <p class="name">
                {% if (file.url) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
                {% } else { %}
                    <span>{%=file.name%}</span>
                {% } %}
            </p>
            {% if (file.error) { %}
                <div><span class="label label-danger">Error</span> {%=file.error%}</div>
            {% } %}
        </td>
        <td>
            <span class="size">{%=o.formatFileSize(file.size)%}</span>
        </td>
        <td>
            {% if (file.deleteUrl) { %}
                <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                    <i class="glyphicon glyphicon-trash"></i>
                    <span>Delete</span>
                </button>
                <input type="checkbox" name="delete" value="1" class="toggle">
            {% } else { %}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>

感谢您的帮助。

- roberto

---

我没有看到任何提供“progressbar”插件/小部件的库。 - Arun P Johny

Answer 1

您缺少 jquery.fileupload-ui.js

。

- ariel

---

明白了，但我仍然有同样的问题。谢谢。 - roberto

我已经得到了答案，但我需要超过10个声望才能发布我的答案，或者等待1/20/2014 7:29:05 PM。 - roberto

Answer 2

很明显是我的错。在我的ItemController.php文件中有一行错误的代码：

$layoutView->headScript()->appendStylesheet('http://blueimp.github.io/JavaScript-Templates/js/tmpl.min.js');

正确的那个：

$layoutView->headScript()->appendFile('http://blueimp.github.io/JavaScript-Templates/js/tmpl.min.js');

并注释此行：

js/libraries/jfu/js/jquery.fileupload-jquery-ui.js

- roberto