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

Posted

技术标签:

【中文标题】jQuery 文件上传插件 - 开始/取消按钮和进度条不起作用【英文标题】：jQuery file upload plugin - Start/Cancel button and Progress bar do not work 【发布时间】：2014-02-09 13:18:17 【问题描述】：

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

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>

感谢您的帮助。

【问题讨论】：

我没有看到任何提供 progressbar 插件/小部件的库 【参考方案1】：

你错过了jquery.fileupload-ui.js

【讨论】：

没错，现在我明白了，但我仍然遇到同样的问题。谢谢。 我得到了答案，但我需要超过 10 个声望才能发布我的答案或等待 2014 年 1 月 20 日下午 7:29:05。【参考方案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

【讨论】：

以上是关于jQuery 文件上传插件 - 开始/取消按钮和进度条不起作用的主要内容，如果未能解决你的问题，请参考以下文章

取消表单文件上传提交

jQuery File Upload文件上传插件使用

jQuery实用美化input 上传组建

Jquery-fileupload 插件 - 上传文件但说“文件上传失败”

jQuery File Upload文件上传插件简单使用

jQuery 文件上传：是不是可以使用提交按钮触发上传？